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

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

react-select reactjs javascript

0

psudo · 技术社区 · 4 年前

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

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

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

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

1 回复 | 直到 4 年前

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