反应异步选择在选择中添加新选项未更新

问题描述

如何在单击添加选项时明确向 react-select/async 组件添加选项，我无法更新选项，但状态正在更新！！ 有没有其他方法可以达到这个目的？

import React,{ useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import AsyncSelect from "react-select/async";

const MyComponent = () => {
  const optionsData = [
    { value: "Spring",label: "Spring" },{ value: "Summer",label: "Summer" },{ value: "Autumn",label: "Autumn" },{ value: "Winter",label: "Winter" }
  ];

  const [options,setoptions] = useState(optionsData);

  const loadOptions = (inputValue) => {
    console.log(inputValue,"pppp");
    return new Promise((resolve,reject) => {
      // using setTimeout to emulate a call to server
      setTimeout(() => {
        resolve(filter(inputValue));
      },2000);
    });
  };

  const filter = (inputValue) =>
    options.filter((option) =>
      option.label.toLowerCase().includes(inputValue.toLowerCase())
    );
  const handleAddOption = () => {
    const newOptions = [
      { value: "Apple",label: "Apple" },{ value: "Ball",label: "Ball" }
    ];
    setoptions((prevstate) => [...prevstate,...newOptions]);
  };
  return (
    <div style={{ display: "flex",justifyContent: "space-around" }}>
      <div style={{ width: "400px" }}>
        <AsyncSelect defaultOptions cacheOptions loadOptions={loadOptions} />
      </div>
      <button onClick={handleAddOption}>ADD OPTIONS</button>
    </div>
  );
};

ReactDOM.render(<MyComponent />,document.getElementById("app"));

CODESANDBOX LINK HERE

解决方法

您应该使用 options 状态作为 defaultOptions 组件的 AsyncSelect prop 的值。来自关于 defaultOptions 的文档：

为这个 prop 提供一个选项数组将填充打开选择时使用的初始选项集，此时远程加载仅在过滤选项时发生（在控件中输入）

import React,{ useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import AsyncSelect from "react-select/async";

const MyComponent = () => {
  const optionsData = [
    { value: "Spring",label: "Spring" },{ value: "Summer",label: "Summer" },{ value: "Autumn",label: "Autumn" },{ value: "Winter",label: "Winter" }
  ];
  const [options,setOptions] = useState(optionsData);

  const loadOptions = (inputValue) => {
    return new Promise((resolve,reject) => {
      // using setTimeout to emulate a call to server
      setTimeout(() => {
        resolve(filter(inputValue));
      },2000);
    });
  };

  const filter = (inputValue) =>
    options.filter((option) =>
      option.label.toLowerCase().includes(inputValue.toLowerCase())
    );

  const handleAddOption = () => {
    const newOptions = [
      { value: "Apple",label: "Apple" },{ value: "Ball",label: "Ball" }
    ];
    setOptions((prevState) => [...prevState,...newOptions]);
  };

  return (
    <div style={{ display: "flex",justifyContent: "space-around" }}>
      <div style={{ width: "400px" }}>
        <AsyncSelect
          defaultOptions={options}
          cacheOptions
          loadOptions={loadOptions}
        />
      </div>
      <button onClick={handleAddOption}>ADD OPTIONS</button>
    </div>
  );
};

ReactDOM.render(<MyComponent />,document.getElementById("app"));

CodeSandbox