Javascript 反应-状态未更新或正在重置为旧状态

我正在尝试构建一个具有输入字段功能的聊天应用程序，该字段可用作处于聊天组状态的聊天组数组的过滤器。下面是我的代码的外观：

    constructor(props) {
    super(props);
    this.state = {
      currUserId: "--id--",
      chats: [],
      chat_groups: [],
      users: [],
    };
  }
  .
  .
  .
  <input
className="chat-group__search__input"
placeholder="Search for group..."
onChange={(ev) => {
    console.log(ev.currentTarget.value);
    var thatState = this.state;
    thatState.chat_groups = thatState.chat_groups.map(
    (gp) => {
        gp["visible"] = gp.group_name
        .toLowerCase()
        .includes(ev.currentTarget.value);
        return gp;
    }
    );
    // getting correct state in thatState variable
    this.setState(thatState);
}}
/>
// getting old state in setState callback and componentDidUpdate lifecycle

---

不，不要这样做。

var thatState=this.state

这只是一个对象，它很容易发生变异，您不会得到更新，因为react状态更改从未发生过

---

相反，请执行以下操作：

var{chat\u groups}=this.state

，然后进一步使用它并在最后设置state

this.setState（{chat\u groups:chat\u groups}）

也尽量避免变异意味着复制

聊天组的值

也

似乎你在试图直接操纵状态，这是一个很大的禁忌

onChange={(ev) => {
    this.setState({
        chat_groups: this.state.chat_groups.map((gp) => {
            gp["visible"] = gp.group_name
            .toLowerCase()
            .includes(ev.currentTarget.value);
            return gp;
        })
    });
}}

---

问题是您正在改变

状态

当您执行

var thatState=this.state时两个对象的引用仍然相同。因此，当您更新
该状态时会自动进行。聊天组
您也在更新/改变
状态

将
onChange
方法更改为如下所示

onChange = ev => {
  console.log(ev.currentTarget.value);
  let { chat_groups } = this.state;
  chat_groups = chat_groups.map(gp => ({
      ...gp,
      visible: gp.group_name.toLowerCase().includes(ev.currentTarget.value)
  }));

  this.setState(state => ({
    ...state,
    chat_groups
  }));
};
//Other code
//....
//....
<input
  className="chat-group__search__input"
  placeholder="Search for group..."
  onChange={this.onChange} />


。作为控制台包装器{
最大高度：100%！重要；
}
只能使用该方法更新状态。

您直接在上面的代码中修改状态-。你会得到意想不到的结果，这是不可预测的

这是您应该做的-创建一个新的更新对象并将其传递给
setState

onChange={（ev）=>{
控制台日志（ev.currentTarget.value）；
const updatedChatGroups=this.state.chat_groups.map（（gp）=>{
const visible=gp.group_name.toLowerCase（）.includes（ev.currentTarget.value）；
返回{
…gp，
看得见的
};
});
//使用此.setState（）更新修改的对象。
this.setState（{chat_groups:updatedChatGroups}）；
}}

您仍在改变状态。检查这一行
gp['visible']=gp.group\u name
line，这引用了状态中的同一对象。谢谢，但是在这些更改之后，它也不起作用。您面临的问题是什么？我已经更新了问题中的新onChange。问题依然存在；在调用setState之前，我将获得每个聊天组的visible属性中的更改，但在setState之后，我将再次获得旧状态（从componentDidUpdate生命周期和setState回调中进行检查）。我已使用可运行的代码段更新了我的答案，请看一看。希望这会有所帮助。这行代码仍然会直接改变状态
gp[“可见”]=gp.group\u name
哦，是的，你是对的。你必须先做一个克隆谢谢，但是在这些更改之后，它也不工作了。谢谢，但是在这些更改之后，它也不工作了。setState之后的状态仍然是旧状态。
onChange = ev => {
  console.log(ev.currentTarget.value);
  let { chat_groups } = this.state;
  chat_groups = chat_groups.map(gp => ({
      ...gp,
      visible: gp.group_name.toLowerCase().includes(ev.currentTarget.value)
  }));

  this.setState(state => ({
    ...state,
    chat_groups
  }));
};
//Other code
//....
//....
<input
  className="chat-group__search__input"
  placeholder="Search for group..."
  onChange={this.onChange} />