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

Question

我正在使用 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;

Answer 1

问题是您正在更改选项数组作为用户select下拉列表中的一个选项

您必须关心 options 是否必须是一个状态或只是 selected 值

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

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;

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

Setting value in a react-dropdown Dropdown's onChange callback throws an error

reactjs

dropdown

onchange