使用React-Select选择选项后页面变白的问题如何解决

• React-Select 的 onChange 回调返回的是完整的选中选项对象（格式为{value: xxx, label: xxx}），你直接将整个对象存入selected状态后，在<h1>标签中直接渲染JS对象，React 不支持直接渲染普通对象，会抛出运行时错误，导致整个应用崩溃白屏。
• 初始状态默认值设为数字0，和options中的选项对象格式不匹配，defaultValue属性不会生效。

你可以选择两种修改方式，根据你的存储需求选择即可：

方式1：存储完整选中对象（适合后续需要同时用到value和label的场景） #

修改后代码如下：

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

function App() {
  // 初始值调整为null，和后续选中的对象格式匹配
  const [selected, setSelected] = useState(null);

  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 ? selected.value : "未选中任何选项"}</h1>
      {/* 如果需要展示选项的显示文本，替换为selected.label即可 */}
    </div>
  );
}

export default App;

方式2：仅存储选中的value值（适合只需要用到value的场景） #

修改后代码如下：

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

function App() {
  // 初始值调整为空字符串，和选项的value类型匹配
  const [selectedValue, setSelectedValue] = useState("");

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

  return (
    <div>
      <Select 
        placeholder="Choose one"
        defaultValue={options.find(item => item.value === selectedValue)}
        onChange={(option) => setSelectedValue(option.value)}
        options={options}
      />
      <h1>{selectedValue || "未选中任何选项"}</h1>
    </div>
  );
}

export default App;

修改后选中选项不会再触发运行时错误，白屏问题会直接解决，选中值也可以正常展示。

内容的提问来源于stack exchange，提问作者sodanet