Javascript 使用react select multiple更新状态的正确方法

我已经为我的应用程序添加了react select软件包。我想用

createablemulti

组件在选择选项中创建新值，并将新创建的值推送到我的状态数组中

我遇到的问题是第一个类型化元素没有被推入状态数组。第二次将其推入状态。第三次，第一个元素被推两次

我在codesandbox中创建了一个代码副本：

---

以及如何连接

X

sign with state以从数组中删除元素。如果单击

X

，整个数组的副本将被推送到数组中。

为提高性能而做出反应有时会批处理此.setState（）调用，而不是一次执行一个调用，这可能会导致意外行为。相反，在通过映射操作数据后，尝试将新值合并到state

大概是这样的：

const newValuesArr = newValue.map(item => item.value);
this.setState({ values: newValuesArr });

有关更深入的说明，请参阅此链接：

---

请运行以下代码，并告诉我它是否解决了您的问题

import React, { Component } from "react";

import CreatableSelect from "react-select/creatable";
import { colourOptions } from "./docs/data";

export default class CreatableMulti extends Component<*, State> {
  state = {
    values: []
  };
  handleChange = (newValue: any, actionMeta: any) => {
    const newValuesArr = newValue ? newValue.map(item => item.value) : [];
    this.setState({ values: newValuesArr });
  };
  render() {
    return (
      <CreatableSelect
        isMulti
        onChange={this.handleChange}
        options={colourOptions}
      />
    );
  }
}

import React，{Component}来自“React”；
从“反应选择/可创建”导入可创建选择；
从“/docs/data”导入{colourOptions}；
导出默认类CreatableMulti-extends组件{
状态={
值：[]
};
handleChange=（newValue:any，actionMeta:any）=>{
const newValuesArr=newValue？newValue.map（item=>item.value）：[]；
this.setState（{values:newValuesArr}）；
};
render（）{
返回(
);
}
}

根据

setState（）

并不总是立即更新组件。它可以批处理更新或将更新推迟到以后。这使得调用

setState（）

后立即读取

This.state

成为一个潜在的陷阱。相反，使用

componentdiddupdate

或

setState

回调（

setState（updater，callback）

），这两种回调都保证在应用更新后触发。如果需要基于上一个状态设置状态，请阅读下面的

updater

参数

所以你可以在你的案例中实现你想要的，如下所示

import React，{Component}来自“React”；
从“反应选择/可创建”导入可创建选择；
从“/docs/data”导入{colourOptions}；
导出默认类CreatableMulti-extends组件{
状态={
值：[]
};
handleChange=（newValue:any，actionMeta:any）=>{
const newValuesArr=newValue？newValue.map（item=>item.value）：[]；
this.setState（{values:newValuesArr}，（）=>{
console.log（this.state.values）；
});
};
render（）{
返回(
);
}
}

---

以下是结果

结果仍然相同。在创建/选择第一个选项时，我得到了空数组。我确实运行了它：这就是我在前面提到异步更新状态时的意思。如果在调用此.setState（）后立即尝试记录状态，它将打印以前的状态，因为它尚未更新状态。尝试在render方法中记录它一次，您会注意到它的工作方式与您期望的一样，或者如果您希望在该方法中看到它，那么您可能必须传递这样的回调函数：this.setState（{values:newValuesArr}，（）=>console.log（this.state.values））；希望这次对你有用。