Javascript ReactJS-this.state中的数组在删除时正确更新，但结果为'；在以后的状态更改之前是否渲染？

我已经看到了这个问题的变化，但没有一个符合我的问题。我正在显示一个文本字段数组，希望能够删除其中一个。单击任何文本字段旁边的“删除”按钮时，数组中的最后一项将消失。但是，我检查了this.state，删除了正确的项，只是从渲染数组中获取了错误的项。当我单击隐藏文本字段然后取消隐藏的按钮时，数组是固定的，并显示正确的已删除项。为什么会这样？状态更新为我想要删除的内容，但它似乎呈现的不是状态。我试过使用

this.forceUpload（）setState

回调中的code>，但这并不能修复它

我已经从代码中包含了一些相关的片段，如果需要，还可以包含更多

export class Questions extends React.Component {

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

  deleteChoice = (index) => {
    let tempChoices = Object.assign([], this.state.choices);
    tempChoices.splice(index, 1);
    this.setState({choices: tempChoices});
  };

  renderChoices = () => {
    return Array.from(this.state.choices).map((item, index) => {
        return (
          <li key={index}>
            <TextField defaultValue={item.text} style={textFieldStyle} hintText="Enter possible response..."
                       onChange={(event) => { this.handleChoice(event, index); }}/>
            <i className="fa fa-times" onClick={() => { this.deleteChoice(index); }}/>
          </li>
        );
    });
  };

  render() {
    let choices = (
      <div>
        <div className="choices">Choices</div>
        <ul>
          {this.renderChoices()}
          <li>
            <RaisedButton label="Add another" style={textFieldStyle} secondary
                        onClick={() => { this.addChoice(); }}/>
          </li>
        </ul>
      </div>
    );
    return (
      {choices}
    );
  }
}

导出类问题扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
...
选择：[]
...
};
}
deleteChoice=（索引）=>{
让tempChoices=Object.assign（[]，this.state.choices）；
拼接（索引1）；
this.setState（{choices:tempChoices}）；
};
renderChoices=（）=>{
返回数组.from（this.state.choices）.map（（项，索引）=>{
返回(

{this.handleChoice（事件、索引）；}}/>
{this.deleteChoice（index）；}}/>

);
});
};
render（）{
让选择=(
选择

{this.renderChoices（）}

{this.addChoice（）；}}/>


);
返回(
{选择}
);
}
}

---

感谢您的帮助，这非常令人沮丧。

您需要在

renderChoices

函数中使用数组索引以外的键。您可以在React的文档中阅读更多关于为什么会出现这种情况的信息：

当React协调键控子项时，它将确保 具有密钥的子项将被重新排序（而不是删除）或销毁 （而不是重复使用）

---

考虑使用

item.text

作为键或特定于该项的其他标识符。

我会使用

tempChoices=this.state.choices.slice（）

或filter（）将其删除。不确定这是否重要，可能不是……你的标题是“结果在以后状态改变之前不会呈现”，但你的描述听起来像是一个完全不同的问题？这是我的想法，但快速测试并没有重现它：为什么有效？看了你的示例。从官方来看，这不应该起作用。但奇怪的是，确实如此。也许是代码笔的工作方式？如果100%确定是使用索引作为键导致的，那么代码中出现的奇怪行为，如答案中所述。您可以找到进一步的解释。如果使用索引作为键，有时它会起作用（如在代码笔中），react会注意到，尽管索引键没有更改，但元素的内容是不同的。有时它不起作用。然后react（错误地）从未更改的索引键得出结论，内容也没有更改。感谢您的链接和解释，解决了问题。