如何在状态更改（父）reactjs时重新渲染子组件

Posted 2023-02-21

【中文标题】如何在状态更改（父）reactjs时重新渲染子组件

【英文标题】：how to re-render child component on state change(Parent) reactjs

【发布时间】：2018-08-14 04:14:14

【问题描述】：

我有一个数组列表 登录返回初始数组的子组件。 从 API 更改数据后componentDidMount 我得到一个对象数组 如果我将该数组记录在 render 函数的父组件中。 它正在改变 但它不是子组件。 我该怎么办？？

【参考方案1】：

有几种方法可以做到这一点，但您基本上需要告诉您的子组件 props 已更新。

一种方法是使用shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState)
    return this.props.items[0] !== nextProps.items[0]);

您可能希望更好地检查if 语句以查看数组是否已更改，但我想您明白了。

您也可以使用componentDidUpdate 或componentwillreceiveprops，但如果您正在更新将强制重新渲染的状态，则使用它们

【讨论】：

我猜这不是必需的，因为shouldComponentUpdate 默认返回true。

【参考方案2】：

您应该使用组件生命周期方法componentWillReceiveProps。 componentDidMount 仅在组件安装后调用一次。 componentWillReceiveProps 总是在 props 改变时被调用。如需参考，请访问：componentWillReceiveProps。它会是这样的：

componentWillReceiveProps(nextProps) 
  if(this.props !== nextProps)
    // your code here
  

【参考方案3】：

当父组件状态发生变化时，通常会自动重新渲染子组件。 我创建了这个jsfiddle，它工作得很好。

数组未在子组件中更新的一个原因可能是因为您只是在控制台记录数组而不将其使用到 DOM。为此，您可以尝试在子组件中使用数组中的内容，就像简单地

return (
    <div>this.props.Items[0].name</div>
)

所以这种情况可能只有一次。

但是，如果您希望在不使用子组件中的数组元素的情况下打印 console.log()，那么您可以尝试

componentDidUpdate() 
    this.forceUpdate();

因此，每当您设置新状态或更新数据时，componentDidUpdate 将在那里被调用，您可以尝试强制重新渲染组件。仍然未经测试。

【讨论】：

你应该避免使用this.forceUpdate，除非没有办法。在这种情况下，一旦状态改变，组件就会更新。

【参考方案4】：

每当状态发生变化时，React 本身都会重新渲染组件及其子组件。你不需要自己做。但是，您可以使用shouldComponentUpdate() 来决定是否更新组件。

查看Does render get called any time “setState” is called?

【参考方案5】：

我使用 key 属性找到了一个不错的解决方案。如果我们更改了子组件或 React 组件的某些部分的 key 属性，它将完全重新渲染。当您需要重新渲染 React 组件的某些部分或重新渲染子组件时，它将使用它。这是一个例子。我将重新渲染整个组件。

import React,  useState, useEffect  from "react";
import  PrEditInput  from "./shared";

const BucketInput = ( bucketPrice = [], handleBucketsUpdate, mood ) => 
  const data = Array.isArray(bucketPrice) ? bucketPrice : [];
  const [state, setState] = useState(Date.now());
  useEffect(() => 
    setState(Date.now());
  , [mood, bucketPrice]);
  return (
    <span key=state>
      data.map((item) => (
        <PrEditInput
          key=item.id
          label=item?.bucket?.name
          name=item.bucketId
          defaultValue=item.price
          onChange=handleBucketsUpdate
          mood=mood
        />
      ))
    </span>
  );
;

export default BucketInput;

【参考方案6】：

你可以使用 useState

例如

export function myChildComponent(myValue) 
   const [MyValue, setMyValue] = useState(null);
   useEffect(() => 
       setMyValue(myValue);
   , [myValue])