Javascript 反应：反应选择的默认值

我有一个简单的列表，其中使用

.map

显示循环

选择

一切正常，但每个
select
的初始默认值不是数组列表中的值

如何为列表中的每个选择设置
defaultValue


import React，{useState}来自“React”；
从“反应选择”导入选择；
功能选择项（道具）{
const[value，setValue]=React.useState（props.list[0]）；
返回(
{
设置值（新值）；
props.onChange（newValue.value）；
}}
value={value}
/>
);
}
导出默认值（）=>{
常数animationsList=[
{value:“animation1”，标签：“Dance”}，
{值：“动画2”，标签：“翻转”}，
{值：“animation3”，标签：“Salsa”}
];
常量反应列表=[
{
id:“1”，
动画：“动画1”
},
{
id:“2”，
动画：“动画2”
},
{
id:“3”，
动画：“动画3”
}
];
const[links，setLinks]=useState（reactList）；
const onChange=（索引，动画）=>{
常量克隆链接=[…链接]；
克隆链接[索引]。动画=动画；
设置链接（克隆链接）；
console.log（克隆链接）；
};
返回(

{links.map（（url，indexurl）=>(

onChange（indexurl，动画）}
list={animationsList}
defaultValue={url.animation.value}
/>

))}

);
};
不需要在
SelectItem
组件中设置新状态

值
或
默认值
必须是列表中用于选项的对象

这是最新消息

功能选择项（道具）{
返回(
{
props.onChange（newValue.value）；
}}
value={props.value}
/>
);
}
导出默认值（）=>{
常数animationsList=[
{value:“animation1”，标签：“Dance”}，
{值：“动画2”，标签：“翻转”}，
{值：“animation3”，标签：“Salsa”}
];
常量反应列表=[
{
id:“1”，
动画：“动画1”
},
{
id:“2”，
动画：“动画2”
},
{
id:“3”，
动画：“动画3”
}
];
const[links，setLinks]=useState（reactList）；
const onChange=（索引，动画）=>{
常量克隆链接=[…链接]；
克隆链接[索引]。动画=动画；
设置链接（克隆链接）；
console.log（克隆链接）；
};
返回(

{links.map（（url，indexurl）=>(

onChange（indexurl，动画）}
list={animationsList}
值={animationsList.find(
（aL）=>aL.value==url.animation
)}
/>

))}

);
};
非常感谢。你能解释一下这句话吗
（aL）=>aL.value==url.animation
@AlyaKra我正在
animationlist
中找到对象。
值
和
动画
属性在这两个对象之间是相等的。我明白了。再次非常感谢。很高兴能帮忙。如果您的问题得到解决，您能否将此标记为正确答案？
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>
  );
};

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>
  );
};