在 react-dropdown Dropdown 的 onChange 回调中设置值会引发错误

大佬教程收集整理的这篇文章主要介绍了在 react-dropdown Dropdown 的 onChange 回调中设置值会引发错误，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在 react-dropdown Dropdown 的 onChange 回调中设置值会引发错误？

开发过程中遇到在 react-dropdown Dropdown 的 onChange 回调中设置值会引发错误的问题如何解决？下面主要结合日常开发的经验，给出你关于在 react-dropdown Dropdown 的 onChange 回调中设置值会引发错误的解决方法建议，希望对你解决在 react-dropdown Dropdown 的 onChange 回调中设置值会引发错误有所启发或帮助；

我正在使用 react-dropdown 的下拉菜单来显示一些选项。每次用户单击列表中的选项时，选项的值都应更改。根据我的代码，它是第一次更改。然而，从列表中选择第二次后，它给 TypeError 说 options.map 不是一个函数。我该如何解决这个问题？

import React,{ useState,useEffect } from "react";
import Dropdown from "react-dropdown";
import "react-dropdown/style.CSS";
import "./styles.CSS";

function App() {
  const [options,setoptions] = useState(["one","two","three"]);
  const defaultoption = options[""];
  
  useEffect(() => {
    console.log(options.value);
  },[options.value]);

  return (
    <div classname="App">
      <Dropdown
        options={options}
        onChange={(value) => setoptions(value)}
        value={defaultoption}
        placeholder="SELEct an option"
      />
    </div>
  );
}
export default App;

解决方法

@H_696_16@

问题是当用户在下拉列表中选择一个选项时，您正在更改选项数组

你必须关心 options 必须是一个状态还是只是选定的值

我已经为你重写了，因为我认为这是正确的方法

import React,{ useState,useEffect } from "react";
import Dropdown from "react-dropdown";
import "react-dropdown/style.css";
import "./styles.css";

function App() {
  const [SELEctedoption,setSELEctedoption] = useState("");
  const options = ["one","two","three"];

  useEffect(() => {
    console.log(SELEctedoption);
  },[SELEctedoption]);

  return (
    <div className="App">
      <Dropdown
        options={options}
        onChange={({ value }) => setSELEctedoption(value)}
        value={SELEctedoption}
        placeholder="SELEct an option"
      />
    </div>
  );
}
export default App;