Question

我有一个页面提供了contatcs信息：

Button button = (Button) findViewById(R.id.button_send);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        // Do something in response to button click
    }
});

contactsInfo.map((info, index) => ( <SearchResultPanel info={info} isAdmin={isAdmin} key={index} handleChange={this.makeHandleChange('searchResultPanel')} /> )),是contactsInfo个对象的数组。

在contactInfo组件上，我可以选择删除当前联系人：

SearchResultPanel

和<button onClick={() => this.handleDelete(info.id)}>函数：

handleDelete

如果我按降序为前handleDelete = async contactID => { await deleteContact(contactID); this.setState(contactInfo: this.state.contactInfo.id === contactID? {} : this.state.contactInfo, })); };，contacts[2]，contacts[1]删除联系人，则一切正常，如果我按前降{{1} }，contacts[0]，contacts[0]中，第一个contacts[1]被删除，但是在contacts[2]中，我看到第二个联系人的状态也正在清除但是第二个联系人仍显示在页面上，然后当我按下其删除按钮时，什么也没发生...

导致这种行为的contact方法上我做错了什么？

console.log函数：要更新父组件的状态：

handleDelete

和父componentDidUpdate函数：

  componentDidUpdate(_, prevState) {
    const { handleChange } = this.props;
    if (this.state !== prevState) {
      handleChange(prevState.contactInfo.id);
    }
  }

整个父组件：

handleChange

整个子组件：

  makeHandleChange = panelName => contactID => {
    this.setState(prevState => ({
      contactsInfo: prevState.contactsInfo.filter(i => i.id !== contactID ),
    }));
  };

Answer 1

键可帮助React识别哪些项目已更改，添加或为删除。键应赋予数组内的元素以给出这些元素具有稳定的身份。

在您的代码中，您将数组的索引用作键，不建议这样做。

如果项的顺序可能不建议使用索引作为键更改。这会对性能产生负面影响，并可能导致问题具有组件状态。 React将默认使用索引作为键。

您应该使用info.id中的contact，因为这样您便可以声明稳定的身份

contactsInfo.map(info => (
                <SearchResultPanel
                  info={info}
                  isAdmin={isAdmin}
                  key={info.id}
                  handleChange={this.makeHandleChange('searchResultPanel')}
                />
              )),

来源：https://reactjs.org/docs/lists-and-keys.html

Answer 2

您需要更新handleDelete函数。我认为您只是缺少setState函数的花括号。

handleDelete = async contactID => {
  await deleteContact(contactID);
  this.setState({
    contactInfo: this.state.contactInfo.id === contactID? {} : this.state.contactInfo,
  });
};

从对象数组中删除项目

2 个答案: