我如何在React列表中创建副本(相同的键)?

Question

我实际上需要创建具有相同键的副本。像这样:

const list = [...items, ...items]

和在我的渲染:

{list.map(item => (
    <div key={item.id}>
        <Image src={item.image} width="200" height="200" />
    </div>
))

我需要每个副本是绝对相同的，所以他们不加载或处理图像两次。最终结果将是:

[image 1] [image 2] [image 1] [image 2]

Answer 1

这就是你如何合并两个列表，我仍然不是很清楚你在问什么，如果有任何疑问，请写下来。

function Test() {
  const [firstList, setFirstList] = useState([{ a: "2" }, { b: "3" }]);
  const [secondList, setSecondList] = useState([{ c: "4" }, { d: "5" }]);
  useEffect(() => {
    alert(JSON.stringify(firstList));
  });
  function mergeList() {
    secondList.forEach((d) => setFirstList((firstList) => [...firstList, d]));
  }
  return <button onClick={mergeList}>Click</button>;
}
export default Test; 

或者你可以改变你的函数像这样，(我从来没有尝试过)——

  function mergeList() {
    let previous = firstList;
    secondList.forEach((d) => previous.push(d));
    setFirstList(previous);
  }