為什么反應選擇默認值不顯示

Question

我像下面的代碼 1 一樣使用 react select。 但是在 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"
        />

Answer 1

似乎 defaultArray 不等於數組（閱讀下面的代碼，比解釋更容易理解）

defaultArray !=  [
                  { value: "30", label: "A" },
                  { value: "31", label: "B" },
                  { value: "32", label: "C" },
                  { value: "33", label: "D" },
                  { value: "34", label: "E" },
                ]

defaultArray 它可能是一個 anidated 數組

[
 [
    { value: "30", label: "A" },
    { value: "31", label: "B" },
    { value: "32", label: "C" },
    { value: "33", label: "D" },
    { value: "34", label: "E" },
  ]
]

請檢查並讓我知道

編輯：

code2 和 code3 給了我們 defaultArray 的提示：

• 不是 null
• 不是未定義的
• 它可能是空的

就像你在編輯中所說的那樣，可能是 useEffect 錯誤

基本上你初始化數組，渲染組件，用值填充數組

試試這個：

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

你應該在渲染之前填充數組

---

另外，請記住這一點

const dependenciesArray = []
useEffect(()=>{}, dependenciesArray) // this will block the rerender of the component at state update
useEffect(()=>{}) // not passing an array will force a rerender of the component at each state update

所以如果你想要動態 select 值，不要將第二個參數傳遞給useEffect()

請參閱文檔： useEffect 文檔

Answer 2

試試這個，

import React from "react";
import "./styles.css";
import Select from "react-select";

export default function App() {
    return (
        <div className="App">
            <h1>React-select example</h1>
            <SelectComponent />
        </div>
    );
}

const SelectComponent = () => {
    const options = [
        { value: "30", label: "A" },
        { value: "31", label: "B" },
        { value: "32", label: "C" },
        { value: "33", label: "D" },
        { value: "34", label: "E" },
        { value: "35", label: "F" },
        { value: "36", label: "G" },
        { value: "37", label: "H" },
        { value: "38", label: "I" }
    ];

    const defaults = [options[0], options[1], options[2],  options[3]];

    return (
        <div>
            <Select
                isMulti
                defaultValue={defaults}
                options={options}
            />
        </div>
    );
};

我認為問題是您的默認值與選項值不匹配，您正在為 select 組件提供 2 不同的數據 arrays 並且它變得混亂

Answer 3

嗨，我解決了這個問題，但我仍然不明白是什么原因造成的。

我不得不添加{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;