ReactJs -无法通过重置值道具清除Textarea

Question

我现在的代码是：

constructor(props) {
    super(props);
    this.state = {
        data: [],
    };
}

componentWillMount() {
    this.getDetails();
}

//this.getDetails() will load this.state.data, which will have multiple records. Each record has many fields, including "Rationale". 
//Some other functions

render() {

var resolutionList = this.state.data.map((item, index) =>
        <tr key={index} className={(() => { if (item.ScreenChange == "Deleted") return ("danger") })()}>
            <td className="">Some</td>
            <td className="">Other</td>
            <td className="">Table</td>
            <td className="">Data</td>
            <td className="col-sm-3">
                <textarea className="form-control" name={index} id={index} rows="4" cols="50" maxLength="4000" style={{'resize':'none'}}
                    value={item.Rationale}
                    onChange={this.handleRationalChange}
                />
            </td>
        </tr>
    );
}
return (
{resolutionList}
)

现在，我想强制清除文本区域中的数据。我创建了下面的函数来重置this.state.data。其他字段被成功地更新为空白，除了“基本原理”字段。

通过调试，我可以看到this.state.datai.Rationale实际上已经是null了。然而，屏幕仍然显示旧的值。这里少了什么？

<button type="button" className="btn btn-default" onClick={() => this.handleNewForm()}>Clear data</button>

handleNewForm = () => {
    for (i = 0; i < this.state.data.length; i++) {
        this.state.data[i].some = null;
        this.state.data[i].other = null;
        this.state.data[i].fields = null;
        this.state.data[i].Rationale = null;

    }
    this.forceUpdate();
}

编辑

我尝试过setState，但是它仍然没有清除数据，或者给了我语法错误。

这给了我语法错误：

this.setState( data[i].Rationale : null);

这仍然不清楚数据：

this.setState( this.state.data[i].Rationale = null);

Answer 1

在handleNewForm中，您需要使用setState，而不是状态。

handleNewForm = () => {
    for (i = 0; i < this.state.data.length; i++) {
      this.setState({data[i]: {Rationale: null, other: null}});
    }
    this.forceUpdate();
}

请注意，您需要确保data[i]本身存在并且不是null，否则您将得到一个类似于"cannot update value of undefined..."的错误。

另一种可能起作用的方法是：

dataObj = {...this.state.data[i]};
dataObj.Rationale = null;
dataObj.other = null;                      
this.setState({data[i], dataObj});

或

dataObj = {...this.state.data[i], Rationale: null, other: null};
this.setState({data[i], dataObj});

Answer 2

您需要使用setState() (您这样做的尝试是无效的Javascript)。将您的handleNewForm函数转换为：

handleNewForm = () => 
  this.setState({
    data: this.state.data.map(dataItem => (
      { 
        ...dataItem, 
        some: null,
        other: null, 
        fields: null, 
        Rationale: null 
      }
    )) 
  })