React-Select：选择选项后页面变白答案

【问题标题】：React-Select: Page turns white after selecting an optionReact-Select：选择选项后页面变白
【发布时间】：2021-12-02 14:48:26
【问题描述】：

我对 React 很陌生，我正在尝试使用 React-Select 来创建一个简单的下拉菜单。当你选择一个选项时，它应该显示它下面的值，因为我正在使用 onChange 函数和 useState Hook，但是每次我选择一些东西时，整个页面都会变成白色。

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;

感谢您的帮助，谢谢。

【问题讨论】：

标签： reactjs react-hooks react-select

【解决方案1】：

我对您的代码做了一个简单的编辑：

当onChange 触发时，您使用onChange={(e)=>setSelected(e.value)} 设置选定的值

这是一个函数式codesandbox.

【讨论】：

嘿，这很完美，而且比我的方式更时尚。非常感谢。
不客气！

【解决方案2】：

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

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

【讨论】：

感谢您的回答，但这不起作用，当我将鼠标悬停在“值”上时，它说：“字符串”类型上不存在属性“值”。但我找到了另一种可行的方法，我将发布 ist 作为答案。

【解决方案3】：

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

我创建了一个函数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 中所做的相同，对吧？

【讨论】：