IT技术 - React - 功能组件在将功能作为props传递时保持重新渲染 - 吾爱随笔录

我的react应用程序有问题，我不知道如何解决；

我有一个包含值和所选列表的数组以及一个将项目添加到所选列表的函数

import React, { useState } from "react";
import Parent from "./Parent";
export default function App() {
  const [chosenList, setChosenList] = useState([]);
  const array = ["dsadas", "dasdas", "dasdasd"];

  const addToChosenList = string => {
    setChosenList([...chosenList, string]);
  };

  return (
    <div className="App">
      <Parent
        arr={array}
        chosenList={chosenList}
        addToChosenList={addToChosenList}
      />
    </div>
  );
}

通过数组映射的父组件并为嵌套组件提供props：item、addToChosenList、inList

import React from "react";
import Nested from "./Nested.js";

export default function Parent({ arr, addToChosenList, chosenList }) {
  return (
    <div className="App">
      {arr.map((item, index) => (
        <Nested
          key={index}
          item={item}
          addToChosenList={addToChosenList}
          inList={chosenList.findIndex(listitem => listitem === item) > -1}
        />
      ))}
    </div>
  );
}

显示项目并为其提供 addToChosenList 函数以将项目添加到所选列表的嵌套组件

import React, { memo } from "react";
export default memo(function Parent({ item, addToChosenList, inList }) {
  const childFunctionToAddToChosenList = () => {
    addToChosenList(item);
  };
  return (
    <div className="App" onClick={childFunctionToAddToChosenList}>
      <div>{item}</div>
      {inList && <div>in List</div>}
    </div>
  );
});

在我仅单击列表中的一项后，每个嵌套组件都会重新渲染

有谁知道怎么解决？？

谢谢：）