Question

我有一个数组列表
登录子组件，返回初始数组。
更改API componentDidMount的数据后我得到了一系列物体如果我在render函数的父组件中记录该数组它正在改变但是儿童成分不是。
我该怎么办？

Answer 1

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

执行此操作的一种方法是使用shouldComponentUpdate

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

您可能希望更好地检查一下if语句，看看数组是否已更改，但我认为您明白了这一点。

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

Answer 2

通常，当父组件中的状态发生更改时，react会自动重新呈现子组件。我创建了这个jsfiddle，它完全正常。

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

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

所以这可能是曾经的情况。

但是如果你想在不使用子组件中的数组元素的情况下打印console.log（），那么你可以试试

componentDidUpdate() {
    this.forceUpdate();
}

因此，无论何时设置新状态或更新数据，都会在那里调用componentDidUpdate，您可以尝试强制重新呈现组件。仍然未经测试。

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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;

如何在状态更改（父）reactjs上重新呈现子组件

5 个答案: