ReactJs this.setState 不是函数

Question

我尝试用 <input> 标签值更改 this.state.id 的值，当我点击 <a> 标签时，如下所示：

 {this.state.json[1].map(i => (
    <tr>
        <td>{i.cin}</td>
        <td>{i.nom}</td>
        <td>{i.prenom}</td>
        <td>
             <a onClick={() => this.state.click(i.id)} >
                   <input value={i.id} hidden></input>
                   Create a New Folder
             </a>
        </td>
    </tr>
  ))}

但控制台显示 this.setState is not a function。这是我的组件：

    constructor(props)
{
    super(props);
    this.state = {
      json:JSON.parse(props.data),//data received from a laravel controller used to 
      implement the page.
      objet: '',
      id: '',
      click: function(id){
          var a = id;//a is an integer 
          alert('hitting waypoint 1');//clear hit
          this.setState({//error
          id: a,
          }).bind(this);
          alert('hitting waypoint 2');//not alerting
          alert("id = " + this.state.id)//not alerting
      }
    };
    this.onChangeValue = this.onChangeValue.bind(this);
    this.onSubmitButton = this.onSubmitButton.bind(this);     
}

Answer 1

我认为这里更大的问题是您可能不应该在组件的 state 中包含此功能。如果您声明它类似于您的其他处理程序（onChangeValue 和 onSubmitButton）并像您在构造函数中那样绑定，该函数可能会正常工作。

但是，如果您希望将函数保留在 state 中，将其更改为箭头函数可能会解决问题。此外，作为最佳实践，您应该将 var 的使用更改为 let 或 const.

您改进后的功能可能如下所示：

click: (id) => {
    const a = id;
    alert('hitting waypoint 1');
    this.setState({
        id: a,
    });
    alert('hitting waypoint 2');
    alert("id = " + this.state.id);
}

顺便说一句，setState 是异步的，所以最后一个警报 (this.state.id) 可能 return 不是你想的那样。如果你想在设置后直接使用新的id，你应该使用前面的const a来保证它有正确的值。使用状态（通常）最好留给 render 函数。

ReactJs this.setState 不是函数

ReactJs this.setState is not a function

javascript

state

setstate

reactjs