React-Select：选择一个选项后页面变白

Question

我是 React 的新手，我正在尝试将 React-Select 用于简单的下拉菜单。当你 selected 一个选项时，它应该显示它下面的值，因为我正在使用 onChange 函数和 useState Hook，但每次我 select 某些东西时，整个页面都会变成白色。

App.js

import "./App.css";
import Select from "react-select";
import { useState } from "react";

function App() {
  const [selected, setSelected] = useState(0);

  const options = [
    { value: "1", label: "a" },
    { value: "2", label: "b" },
    { value: "3", label: "c" },
  ];

  return (
    <div>
      <Select placeholder="Choose one"
      defaultValue={selected}
      onChange={setSelected}
      options={options}
      />
      <h1>{selected}</h1>
    </div>
  );
}

export default App;

感谢任何帮助，谢谢。

Answer 1

如果您在浏览器中检查控制台，您会发现问题出在 h1 组件上。这可能是您要实现的目标：

     <h1>{selected.value}</h1>

Answer 2

我找到了解决这个问题的方法，但是我不知道这是否是最好的解决方案。

我创建了一个函数 handleChange

const handleChange = e => {
    setSelected(e.value);
  }

并添加了一个 value 属性，并使用 onChange

调用了该函数

<Select placeholder="Choose one"
      defaultValue={selected}
      value={options.find(obj => obj.value === selected)}
      onChange={handleChange}
      options={options}
      />

不知道为什么

<h1>{selected.value}<h1>

不起作用，因为它实际上与我在 handleChange 中所做的相同，对吗？

Answer 3

我对您的代码进行了简单的修改：

当 onChange 触发时，您使用 onChange={(e)=>setSelected(e.value)}

这是一个函数 codesandbox.

React-Select：选择一个选项后页面变白

React-Select: Page turns white after selecting an option

reactjs

react-select

react-hooks