时间戳

首页 > 解决方案 > React - 功能组件在将功能作为道具传递时保持重新渲染

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

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

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

有谁知道怎么解决？？

谢谢 ：）

标签： javascriptreactjsreact-hooks

解决方案

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

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

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

推荐阅读