Question

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

通过数组映射的父组件并为Nested组件提供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>
  );
});

仅单击列表中的一项后，每个嵌套组件都会重新渲染我相信它会渲染，因为当我更改状态时，addToChosenList函数会更改

任何人都知道如何解决它？

谢谢：）

Answer 1

addToChosenList将在每次重新渲染时指向一个新引用，将其包装在useCallback中，这将在重新渲染时保持相同的引用，除非依赖项数组内部的变量之一发生了变化，如果我们传递一个空数组，该函数将在整个组件生命周期中保持相同的引用。

您还需要使用功能更新，以避免由于关闭而导致陈旧状态

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

React-在将功能作为道具传递时，功能组件会保持重新渲染

1 个答案: