Question

我为我的应用添加了react-select软件包。我想在带有print('\n'.join(c for c in string if c.isdigit()))组件的select选项中创建新值，并将新创建的值推送到我的状态数组。

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

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

以及如何将CreatableMulti符号与状态连接以从数组中删除元素。如果单击X，则会将整个数组的副本推入数组。

Answer 1

为提高性能而采取的措施有时会批量处理this.setState（）调用，而不是一次执行一次，这可能会导致意外行为。相反，在通过map操作数据后，尝试合并newValues以声明状态。

类似这样的东西：

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

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

Answer 2

请运行以下代码，让我知道它是否可以解决您的问题。

javax.wsdl.WSDLException: WSDLException (at /soap:Envelope): faultCode=INVALID_WSDL: Expected element '{http://schemas.xmlsoap.org/wsdl/}definitions'

Answer 3

根据docs

setState() 并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用this.state之后立即阅读setState()是一个潜在的陷阱。相反，请使用componentDidUpdate或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

正确的方法以反应选择多个更新状态

3 个答案: