更新状态使数组呈现错误答案

【问题标题】：Updating state makes array render bug更新状态使数组呈现错误
【发布时间】：2019-07-31 05:28:26
【问题描述】：

我有 4 个按钮，用于更新状态“模式”：

<tr><button value = {0} name="mode" onClick={this.handleChange}>Montrer toutes les chambres</button></tr>
<tr><button value = {1} name="mode" onClick={this.handleChange}>Montrer les chambres vides</button></tr>
<tr><button value = {2} name="mode" onClick={this.handleChange}>Montrer les chambres avec de la place</button></tr>
<tr><button value = {3} name="mode" onClick={this.handleChange}>Montrer les chambres pleines</button></tr>

handleChange(event) {
    this.setState({[event.target.name] : event.target.value});
}

此状态会根据数组更改渲染

let txt = myarray.map((item) => {
        console.log(this.state.mode);
        console.log(item);
        if(item===null)
            return(<div>Problème</div>);
        if(this.state.mode===0)
            return(<div>{item.info}</div>);
        else if ((this.state.mode===1)&& (b1))
            return(<div>{item.info}</div>);
        else if((this.state.mode===2) && (b2))
            return (<div>{item.info}</div>);
        else if((this.state.mode===3) && (b3))
            return (<div>{item.info}</div>);
        else return(<div>Invalid item</div>);
    });
return txt;

mode 在我启动程序时设置为0，一切正常。但是，当我更改mode 时，每个项目都会返回无效项目（即使是mode=0）。我尝试将 b1、b2 和 b3 设置为 true 进行测试，但它不起作用，所以这不是问题。 2 console.log 工作正常并显示正确的值。

有人可以帮我吗？有问题的价值吗？

【问题讨论】：

你绑定this.handleChange到构造函数的react this了吗？是有错误还是没有显示你想要的值？

标签： javascript arrays reactjs jsx

【解决方案1】：

将值解析为整数

handleChange(event) {
    this.setState({[event.target.name] : parseInt(event.target.value)});
}

【讨论】：

【解决方案2】：

您可以将其作为数字 arg（您稍后尝试使用 if 语句检查）arg 在函数中发送：

<tr>
  <button name="mode" onClick={e => this.handleChange(e,3)}>
    Montrer les chambres pleines
  </button>
</tr>

handleChange(event, value) {
  this.setState({[event.target.name] : value});
}

【讨论】：