反应：无法设置未定义的属性“动画”

Question

我在 React 中有一个列表，我在其中使用.map从元素数组呈现循环。

无线电输入工作正常，每个人都独立于其他人，但我不能对Select做同样的事情。

Select区域在每个字段中都在变化，我希望它像我对选项所做的那样更改为指定的字段。

我试图重新使用我在收音机中使用的相同handleChange ，但我却遇到了这个错误。

Cannot set property 'animation' of undefined

在这一行

newAnimations[indexurl].animation = name;

我如何设法分开selects ？ 注意：此代码运行良好，但它正在更新每个字段的值。

  const onChange = (animations) => {
    setAnimations(animations);
    console.log(`Animation selected:`, animations);
  };

代码： https://codesandbox.io/s/dank-violet-jibzh?file=/src/App.js:1065-1194

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

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

  const reactList = [
    {
      id: "14444",
      selected: "layout3",
      animation: "animation1"
    },
    {
      id: "24444",
      selected: "layout3",
      animation: "animation2"
    },
    {
      id: "34444",
      selected: "layout3",
      animation: "animation1"
    }
  ];

  const [links, setLinks] = useState(reactList);
  const [animations, setAnimations] = useState(animationsList[0]);

  const handleChangeSelectedReact = (indexurl, layout) => {
    const cloneLinks = [...links];
    cloneLinks[indexurl].selected = layout;
    setLinks(cloneLinks);
    console.log(cloneLinks);
  };

  /* const onChange = (animations) => {
    setAnimations(animations);
    console.log(`Animation selected:`, animations);
  };*/

  const onChange = (indexurl, name) => {
    const newAnimations = [...links];
    newAnimations[indexurl].animation = name;
    setAnimations(newAnimations);
    console.log(newAnimations);
  };

  return (
    <div>
      <ul>
        <div>
          {links.map((url, indexurl) => (
            <li key={url.id}>
              <div>
                <Select
                  options={animationsList}
                  onChange={onChange}
                  value={animations}
                />
                <p />{" "}
                <input
                  type="radio"
                  id={url.id}
                  name={url.id}
                  value="layout1"
                  checked={url.selected === "layout1"}
                  onChange={() =>
                    handleChangeSelectedReact(indexurl, "layout1")
                  }
                />
                <label for="huey">Option 1</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={url.id}
                  name={url.id}
                  value="layout2"
                  checked={url.selected === "layout2"}
                  onChange={() =>
                    handleChangeSelectedReact(indexurl, "layout2")
                  }
                />
                <label for="dewey">Option 2</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={url.id}
                  name={url.id}
                  value="layout3"
                  checked={url.selected === "layout3"}
                  onChange={() =>
                    handleChangeSelectedReact(indexurl, "layout3")
                  }
                />
                <label for="louie">Option 3</label>
              </div>
              <br />
            </li>
          ))}
        </div>
      </ul>
    </div>
  );
};

Answer 1

多个选择共享相同的 state，导致更新每个字段的值。 所以我们需要把Select包装成组件，独立维护自己的state：

function SelectItem({ list }) {
  const [value, setValue] = React.useState(list[0]);
  const onChange = (newValue) => {
    setValue(newValue);
  };

  return <Select options={list} onChange={onChange} value={value} />;
}

...
...
  return (
    <div>
      {links.map((url, indexurl) => (
           
         <SelectItem list={animationsList} />
      
       ))}
    </div>
  );
...
...

更新

修改选中select时的links ：

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

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

  return (
    <div>
      {links.map((url, indexurl) => (
           
          <SelectItem
             onChange={(animation) => onChange(indexurl, animation)}
             list={animationsList}
          />
      
       ))}
    </div>
  );
...
...

完整代码： https://codesandbox.io/s/happy-cloud-m6z99?file=/src/App.js:77-298