React - 函数组件在将函数作为 props 传递时保持重新渲染 [英] React - functional components keep re-render when passing functions as props

问题描述

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

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

import React, { useState } from "react";从./Parent"导入父级；导出默认函数 App() {const [chosenList, setChosenList] = useState([]);const array = ["dsadas", "dasdas", "dasdasd"];const addToChosenList = 字符串 =>{setChosenList([...chosenList, string]);};返回 (<div className="应用程序"><父级arr={数组}选择列表={选择列表}addToChosenList={addToChosenList}/>

);}

通过数组映射的父组件并为嵌套组件提供道具:item、addToChosenList、inList

从react"导入React；从./Nested.js"导入嵌套；导出默认函数 Parent({ arr, addToChosenList, selectedList }) {返回 (<div className="应用程序">{arr.map((item, index) => (<嵌套键={索引}项目={项目}addToChosenList={addToChosenList}inList={chosenList.findIndex(listitem => listitem === item) >-1}/>))}

);}

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

import React, { memo } from "react";导出默认备忘录(function Parent({ item, addToChosenList, inList }) {const childFunctionToAddToChosenList = () =>{addToChosenList(item);};返回 (<div className="App" onClick={childFunctionToAddToChosenList}><div>{item}</div>{inList &&<div>在列表中</div>}

);});

在我只单击列表中的一项后，每个嵌套组件都会重新渲染我相信它呈现是因为 addToChosenList 函数在我改变状态时会改变

有人知道怎么解决吗??

谢谢:)

解决方案

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

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

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

i have an issue in my react app and i dont know how to solve it;

i have an array with values and chosen list and a function to add item to the chosen list

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

Parent component that mapping through the array and give the Nested component the 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>
  );
}

Nested component that displays the item and giving it the addToChosenList function to add the item to the chosen list

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

every Nested component keeps re-render after i clicked only one item in the list i believe it renders because of the function addToChosenList that changes when i change the state

anyone knows how to solve it ??

thanks :)

解决方案

addToChosenList will point to a new reference on every re-render, wrap it in useCallback which will keep the same reference across re-renders unless one of the variables inside of the dependencies array has changed, if we pass an empty array the function will keep the same reference across the entire component lifecycle.

you will also need to use a functional update to avoid stale state due to the closure

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

这篇关于React - 函数组件在将函数作为 props 传递时保持重新渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！