代码之家  ›  专栏  ›  技术社区  ›  psudo

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

  •  0
  • psudo  · 技术社区  · 4 年前

    我已经为我的应用程序添加了react select软件包。我想在选择选项中创建新值 CreatableMulti 组件并将新创建的值推送到我的状态数组。

    我遇到的问题是,第一个类型化元素没有被推送到状态数组中。第二次将其推至状态。第三次推压第一个元件两次。

    我在codesandbox中创建了一个代码副本: https://codesandbox.io/s/react-codesandboxer-example-el0ps?file=/example.js:164-178

    我如何连接 X 使用状态签名以从数组中删除元素。如果我单击 十、 将整个阵列的副本推送到阵列中。

    1 回复  |  直到 4 年前
        1
  •  1
  •   Tushar    4 年前

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

    类似这样:

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

    有关更深入的说明,请参阅此链接: https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

        2
  •  0
  •   Tushar    4 年前

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

    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}
          />
        );
      }
    }
    
        3
  •  0
  •   hgb123    4 年前

    根据 docs

    setState() 并不总是立即更新组件 。它可能会批处理更新或将更新推迟到以后。这使得阅读 this.state 电话刚打完 设置状态() 一个潜在的陷阱。相反,使用 componentDidUpdate 或a setState 回调函数( setState(updater, callback) ),其中任何一个都保证在应用更新后激发。如果需要基于以前的状态设置状态,请阅读 updater 下面的参数。

    这样你就可以在下面这样的情况下实现你想要的

    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 }, () => {
          console.log(this.state.values);
        });
      };
      render() {
        return (
          <CreatableSelect
            isMulti
            onChange={this.handleChange}
            options={colourOptions}
          />
        );
      }
    }
    

    这是 codesandbox link