时间戳

首页 > 解决方案 > 为什么反应选择默认值不显示

reactjs - 为什么反应选择默认值不显示

问题描述

我使用如下代码1的反应选择。但是在 react-select 中不显示默认值。
两个 console.log 始终正确地向我显示相同的值。（defaultArray 只是一个变量）

当我使用 code2. 默认值也不显示。当我使用 code3 时。显示默认值。
这对我来说太好奇了。请给我建议。

编辑1 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

我找到了新的。useEffect 可能是问题的一部分。
当我删除 [useEffect] 并设置 Array. 运作良好。但根本问题是看不见的。

  const [defaultArray, setDefaultArray] = useState([
    { value: "30", label: "A" },
    { value: "31", label: "B" },
    { value: "32", label: "C" },
    { value: "33", label: "D" },
    { value: "34", label: "E" },
  ]);

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^

代码1

import React from "react";

import { useState, useEffect } from "react";

const SelectPersonality: React.FC<RouteComponentProps> = props => {

 const [defaultArray, setDefaultArray] = useState(Array());

 useEffect (() => {
    setDefaultArray([
      { value: "30", label: "A" },
      { value: "31", label: "B" },
      { value: "32", label: "C" },
      { value: "33", label: "D" },
      { value: "34", label: "E" },
    ]);
  }, []);

  return (
      <div>
        {console.log(defaultArray)}
        {console.log([
          { value: "30", label: "A" },
          { value: "31", label: "B" },
          { value: "32", label: "C" },
          { value: "33", label: "D" },
          { value: "34", label: "E" },
        ])}
        <Select
          isMulti
          defaultValue={defaultArray}
          options={character_options}
          onChange={value => Change(value)}
          className="select_personality_character"
        />
      </div>
  );
};

export default SelectPersonality;

代码2

        {console.log(defaultArray)}
        {console.log([
          { value: "30", label: "A" },
          { value: "31", label: "B" },
          { value: "32", label: "C" },
          { value: "33", label: "D" },
          { value: "34", label: "E" },
        ])}
        <Select
          isMulti
          defaultValue={
            defaultArray
              ? defaultArray
              : [
                  { value: "30", label: "A" },
                  { value: "31", label: "B" },
                  { value: "32", label: "C" },
                  { value: "33", label: "D" },
                  { value: "34", label: "E" },
                ]
          }
          options={character_options}
          onChange={value => Change(value)}
          className="select_personality_character"
        />

代码3

      <Select
          isMulti
          defaultValue={
            defaultArray
              ? [
                  { value: "30", label: "A" },
                  { value: "31", label: "B" },
                  { value: "32", label: "C" },
                  { value: "33", label: "D" },
                  { value: "34", label: "E" },
                ]
              : defaultArray
          }
          options={character_options}
          onChange={value => Change(value)}
          className="select_personality_character"
        />

标签： reactjsreact-select

解决方案

嗨，我解决了这个问题，但我仍然不明白是什么原因造成的。

我不得不添加{defaultArray !== undefined && (~)} . 没有它，此代码将无法工作。

我无法理解。

为什么....

import React from "react";

import { useState, useEffect } from "react";

const SelectPersonality: React.FC<RouteComponentProps> = props => {

const [defaultArray, setDefaultArray] = useState<Array<{ [key: string]: string }>>();

 useEffect (() => {
    setDefaultArray([
      { value: "30", label: "A" },
      { value: "31", label: "B" },
      { value: "32", label: "C" },
      { value: "33", label: "D" },
      { value: "34", label: "E" },
    ]);
  }, []);

  return (
       <div> 
　　　　 {defaultArray !== undefined && (
          <Select
            isMulti
            defaultValue={defaultArray}
            options={character_options}
            onChange={value => change(value)}
            className="select_personality_character"
          />
        )}
      </div>
  );
};

export default SelectPersonality;

推荐阅读