Javascript 反应：输入呈现相同的值

我有一个简单的列表，其中每个元素都有一个输入，用于选择要上传的图像。 choosen图像显示正确，但我无法为不同的元素选择不同的图像

我的列表似乎为所有项目呈现相同的值。 我的问题是任何图像都会出现在所有元素中。我希望每个元素都有不同的图像。

这就是我迄今为止所尝试的：

  const handleChange = (index, newimage) => {
    const cloneList = [...list];
    cloneList[index].image = newimage;
    setList(cloneList);
  };

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
导出默认值（）=>{
常量初始值列表=[
{
id:“1”，
图像：“https://picsum.photos/150/150.jpg"
},
{
id:“2”，
图像：“
},
{
id:“3”，
图像：“
}
];
const[list，setList]=React.useState（initialList）；
const[file，setFile]=useState（null）；
常量句柄文件=（事件）=>{
setFile（URL.createObjectURL（event.target.files[0]）；
};
/*我试图改变一个特定的元素
常量handleChange=（索引，新图像）=>{
常量克隆列表=[…列表]；
克隆列表[index].image=newimage；
集合列表（克隆列表）；
};*/
返回(

{list.map（（项目，索引）=>(


))}

);
};

那么类似于

设置列表

到

文件

？抱歉，我还是新手。在克隆列表上设置

image

属性时，您正在改变状态，因为嵌套对象未克隆。看到这个答案：@pilchard我会检查的，谢谢。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

export default () => {
  const initialList = [
    {
      id: "1",
      image: "https://picsum.photos/150/150.jpg"
    },
    {
      id: "2",
      image: " "
    },
    {
      id: "3",
      image: " "
    }
  ];

  const [list, setList] = React.useState(initialList);
  const [file, setFile] = useState(null);

  const handleFile = (event) => {
    setFile(URL.createObjectURL(event.target.files[0]));
  };

  /* What I tried to change a specific element

  const handleChange = (index, newimage) => {
    const cloneList = [...list];
    cloneList[index].image = newimage;
    setList(cloneList);
  };*/

  return (
    <div>
      <ul>
        <div>
          {list.map((item, index) => (
            <li key={item.id}>
              <span>
                <input type="file" onChange={handleFile} />
                <img
                  src={file}
                  alt=""
                  style={{ width: "100px", height: "100px" }}
                />
              </span>
            </li>
          ))}
        </div>
      </ul>
    </div>
  );
};