已解决：ReactJs this.setState 不是函数答案

【问题标题】：Solved : ReactJs this.setState is not a function已解决：ReactJs this.setState 不是函数
【发布时间】：2020-09-08 13:03:24
【问题描述】：

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

 {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);     
}

【问题讨论】：

click 不属于该州。已经有一个解释如何修复的答案，所以我只想说：状态是随时间变化的值。除非您基于组件状态出于某种原因更新点击功能，否则它不应该存在。另外，在state 对象中绑定它会使this 引用状态对象，而不是类。

标签： javascript reactjs state setstate

【解决方案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) 可能不会返回您认为的结果。如果要在设置后直接使用新的 id，则应使用前面的 const a 以保证它具有正确的值。使用状态（通常）最好留给render 函数。

【讨论】：