React：React-select 的 DefaultValue

Question

我有一個簡單的列表，其中使用.map Select

一切正常，但每個select的初始默認值不是我的數組列表中的值。

如何為列表中的每個defaultValue設置默認值？

https://codesandbox.io/s/festive-robinson-847oj?file=/src/App.js:0-1435

import React, { useState } from "react";
import Select from "react-select";

function SelectItem(props) {
  const [value, setValue] = React.useState(props.list[0]);

  return (
    <Select
      options={props.list}
      onChange={(newValue) => {
        setValue(newValue);
        props.onChange(newValue.value);
      }}
      value={value}
    />
  );
}

export default () => {
  const animationsList = [
    { value: "animation1", label: "Dance" },
    { value: "animation2", label: "Flip" },
    { value: "animation3", label: "Salsa" }
  ];

  const reactList = [
    {
      id: "1",
      animation: "animation1"
    },
    {
      id: "2",
      animation: "animation2"
    },
    {
      id: "3",
      animation: "animation3"
    }
  ];

  const [links, setLinks] = useState(reactList);

  const onChange = (index, animation) => {
    const cloneLinks = [...links];
    cloneLinks[index].animation = animation;
    setLinks(cloneLinks);
    console.log(cloneLinks);
  };

  return (
    <div>
      <ul>
        <div>
          {links.map((url, indexurl) => (
            <li key={url.id}>
              <div>
                <SelectItem
                  onChange={(animation) => onChange(indexurl, animation)}
                  list={animationsList}
                  defaultValue={url.animation.value}
                />
              </div>
            </li>
          ))}
        </div>
      </ul>
    </div>
  );
};

Answer 1

不需要SelectItem組件中的新 state。

value或defaultValue必須是用於選項的列表中的 object。

這是更新后的CSB 。

function SelectItem(props) {
  return (
    <Select
      options={props.list}
      onChange={(newValue) => {
        props.onChange(newValue.value);
      }}
      value={props.value}
    />
  );
}

export default () => {
  const animationsList = [
    { value: "animation1", label: "Dance" },
    { value: "animation2", label: "Flip" },
    { value: "animation3", label: "Salsa" }
  ];

  const reactList = [
    {
      id: "1",
      animation: "animation1"
    },
    {
      id: "2",
      animation: "animation2"
    },
    {
      id: "3",
      animation: "animation3"
    }
  ];

  const [links, setLinks] = useState(reactList);

  const onChange = (index, animation) => {
    const cloneLinks = [...links];
    cloneLinks[index].animation = animation;
    setLinks(cloneLinks);
    console.log(cloneLinks);
  };

  return (
    <div>
      <ul>
        <div>
          {links.map((url, indexurl) => (
            <li key={url.id}>
              <div>
                <SelectItem
                  onChange={(animation) => onChange(indexurl, animation)}
                  list={animationsList}
                  value={animationsList.find(
                    (aL) => aL.value === url.animation
                  )}
                />
              </div>
            </li>
          ))}
        </div>
      </ul>
    </div>
  );
};