使用反应 select 多个更新 state 的正确方法

Question

I've added react-select package for my app. And I want to create new values in the select option with CreatableMulti component and push newly created values to my state array.

The trouble I'm having is the first typed element is not pushed into the state array. It is pushed to state on 2nd time. On the 3rd time the first element is pushed twice.

I've created a replica of code in the codesandbox: https://codesandbox.io/s/react-codesandboxer-example-el0ps?file=/example.js:164-178

And how do I connect X sign with state to remove elements from array. If I click X the copy of whole array is pushed into the array.

Answer 1

React for enhancing performance sometimes batches this.setState() calls instead of executing them one at a time which could result in unexpected behaviour. Instead try to merge newValues to state after you have manipulated your data through map.

Something like this:

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

For more in-depth explanation, please refer to this link: https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

Answer 2

Please run the following code and let me know if it solves your problem.

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}
      />
    );
  }
}

Answer 3

According to the docs

setState() does not always immediately update the component . It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback ( setState(updater, callback) ), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below.

So you could achive what you want in your case like below

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}
      />
    );
  }
}

Here is the codesandbox link