export default function DataTable({ col, row }) {
  const [datatable, setDatatable] = React.useState({});
  useEffect(() => {
    setDatatable({
      columns: col,
      rows: row,
    });
  /// do any thing else 
  }, [row]);

  return (
    <MDBDataTableV5
      hover
      entriesOptions={[5, 20, 25]}
      entries={5}
      pagesAmount={4}
      data={datatable}
    />
  );
}

这个例子使用useEffect在道具改变时改变状态。

因为如果父对象的道具改变了，子对象不会重新渲染，但是如果它的STATE改变了:)

你所展示的是: https://facebook.github.io/react/tips/communicate-between-components.html

它将通过道具将数据从父对象传递到子对象，但没有渲染逻辑。

你需要为父节点设置一些状态，然后在父节点更改状态上重新渲染子节点。 这可能会有所帮助。 https://facebook.github.io/react/tips/expose-component-functions.html

你可以使用componentWillReceiveProps:

componentWillReceiveProps({bar}) {
    this.setState({...this.state, bar})
}

这要归功于Josh Lunsford

遵守不变性

这是一个很老的问题，但它是一个常青的问题，如果只有错误的答案和变通方法，它不会变得更好。 子对象不更新的原因不是缺少键或缺少状态，而是你没有遵守不变性原则。

It is the aim of react to make apps faster and more responsive and easier to maintain and so on but you have to follow some principles. React nodes are only rerendered if it is necessary, i.e. if they have updated. How does react know if a component has updated? Because it state has changed. Now don't mix this up with the setState hook. State is a concept and every component has its state. State is the look or behaviour of the component at a given point in time. If you have a static component you only have one state all the time and don't have to take care of it. If the component has to change somehow its state is changing.

Now react is very descriptive. The state of a component can be derived from some changing information and this information can be stored outside of the component or inside. If the information is stored inside than this is some information the component has to keep track itself and we normally use the hooks like setState to manage this information. If this information is stored outside of our component then it is stored inside of a different component and that one has to keep track of it, its theirs state. Now the other component can pass us their state thru the props.

That means react rerenders if our own managed state changes or if the information coming in via props changes. That is the natural behaviour and you don't have to transfer props data into your own state. Now comes the very important point: how does react know when information has changed? Easy: is makes an comparison! Whenever you set some state or give react some information it has to consider, it compares the newly given information with the actually stored information and if they are not the same, react will rerender all dependencies of that information. Not the same in that aspect means a javascript === operator. Maybe you got the point already. Let's look at this:

设a = 42; 令b = a; Console.log('是否a与b相同?'，a === b);// a和b是一样的，对吗?——>真正 A += 5;//现在让我们改变a Console.log (' a是否仍然与b相同?'，a === b);//——> false

我们创建一个值的实例，然后创建另一个实例，将第一个实例的值赋给第二个实例，然后更改第一个实例。 现在让我们看看相同的对象流:

设a = {num: 42}; 令b = a; Console.log('是否a与b相同?'，a === b);// a和b是一样的，对吗?——>真正 A.num += 5;//现在让我们改变a Console.log (' a是否仍然与b相同?'，a === b);//——> true 这次的不同之处在于，对象实际上是指向内存区域的指针，通过断言b=a，您将b设置为指向完全相同对象的与a相同的指针。 你在a中做的任何事情都可以被a指针或b指针访问。 你的线:

this.props.foo.bar = 123

actually updates a value in the memory where "this" is pointing at. React simply can't recognize such alterations by comparing the object references. You can change the contents of your object a thousand times and the reference will always stay the same and react won't do a rerender of the dependent components. That is why you have to consider all variables in react as immutable. To make a detectable change you need a different reference and you only get that with a new object. So instead of changing your object you have to copy it to a new one and then you can change some values in it before you hand it over to react. Look: let a = {num: 42}; console.log('a looks like', a); let b = {...a}; console.log('b looks like', b); console.log('is a the same as b?', a === b); // --> false The spread operator (the one with the three dots) or the map-function are common ways to copy data to a new object or array.

如果你遵守不可变性，所有的子节点更新新的道具数据。

我的案例涉及在props对象上有多个属性，并且需要在更改其中任何一个时重新渲染Child。 上面提供的解决方案是有效的，但为每个方案添加一个密钥变得乏味和肮脏(想象一下有15个……)如果有人面临这个问题，你可能会发现stringify props对象很有用:

<Child
    key={JSON.stringify(props)}
/>

这样，对props上的每个属性的每次更改都会触发Child组件的重新呈现。

希望这能帮到别人。

你应该使用setState函数。如果不是，无论如何使用forceUpdate, state都不会保存您的更改。

Container {
    handleEvent= () => { // use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

你的代码似乎无效。我不能测试这段代码。