反应异步 select 在 select 中添加新选项未得到更新

Question

如何在单击添加选项时明确地向 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

Answer 1

您应该使用 options 状态作为 AsyncSelect 组件的 defaultOptions 属性的值。来自关于 defaultOptions:

的文档

Providing an option array to this prop will populate the initial set of options used when opening the select, at which point the remote load only occurs when filtering the options (typing in the control)

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

反应异步 select 在 select 中添加新选项未得到更新

react async select add new options in select not getting updated

javascript

reactjs

react-select

react-hooks