Reactjs中的重新呈现状态不能按预期工作

Question

我在React中有一个父组件，它保存着应用程序的状态（我构建了一个可过滤表）。在这种状态下，我有一些输入采集的过滤器，状态如下所示：filters: [{"filter1": "value1"}, {"filter2": "value2"}, { }, { }, ...]。过滤器输入构建在子组件FilterBar中，该子组件接收过滤器数组作为特性<FilterBar filters={this.state.filters}/>。
因此，当用户在输入字段中写入内容时，它会根据字段名称和新输入值更新过滤器（父级）的状态。到目前为止，一切都按我的预期工作但是现在我想实现一个按钮来清理过滤器，所以当用户点击它时，过滤器的状态变为空（每个过滤器值为“”字符串）。我成功了，当我按照我预期的setState按钮时，表格会根据我的需要更新。但我犯了一些错误，输入字段接收新的过滤器数组属性，但它不会清除输入文本（所以如果我在输入文本中有一个字或字母，它仍然存在于重新输入后，并且我想要输入为空状态）。
这里是父函数来清洁过滤网（我意识到，它按预期工作）：

cleanFilters() { 
    let filters = this.state.filters.slice(); 
    let f; 
    for (f in filters) { 
     filters[f]['value']=""; 
    } 
    this.setState({filters: filters}, function(){this.updateData();}); 
    } 

，这里是呈现在FilterBar组件上的文字输入的功能：

renderFilterInputs() { 
    var filters = []; 
    for (let i=0; i < this.props.totalFilters; i++) { 
     filters.push(<td key={i}><input type='text' className="form-control" defaultValue={this.props.filtersApplied[i].value} onChange={(evt) => this.handleFilterChange(evt, i)} /></td>); 
    } 
    return filters; 
} 

render() { 
    return (
     <tr key="0" className="filters-bar"> 
     {this.renderFilterInputs()} 
     </tr> 
    ); 
} 

我不明白为什么当我单击按钮时文本输入仍保存文本，因为它再次显示并且过滤器状态为空，所以输入的默认值应为（“”）为空。谢谢你

Answer 1

因为你使用的是defaultValue，所以不值的意思是uncontrolled component。默认值仅将初始值（默认值）分配给输入元素，但不会更新该值。

解决方案：

由于正在使用的onChange与输入元件功能，并且还更新父状态，所以用输入controlled字段，使用值属性的默认值代替。

value = {this.props.filtersApplied[i].value}