确认，添加一个密钥工作。我看了所有的文件想弄清楚原因。

React希望在创建子组件时高效。如果新组件与另一个子组件相同，它就不会呈现新组件，这使得页面加载更快。

添加Key会迫使React呈现新组件，从而重置新组件的状态。

https://reactjs.org/docs/reconciliation.html#recursing-on-children

你应该使用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>
        }
    }
}

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

如果Child不维护任何状态，而只是呈现道具，然后从父组件调用它，那么您可能应该将它作为功能组件。除此之外，您还可以使用与功能组件(useState)的挂钩，这将导致无状态组件重新呈现。

此外，您不应该更改propas，因为它们是不可变的。维护组件的状态。

Child = ({bar}) => (bar);

考虑到道具的渲染限制和状态的增益，如果你使用反应钩子，你可以使用一些技巧。例如，您可以使用useEffect手动将道具转换为状态。这可能不是最好的做法，但在这些情况下是有帮助的。

import { isEqual } from 'lodash';
import { useEffect, useState } from 'react';

export const MyComponent = (props: { users: [] }) => {
  const [usersState, setUsersState] = useState([]);

  useEffect(() => {
    if (!isEqual(props.users, usersState)) {
      setUsersState(props.users);
    }
  }, [props.users]);

  <OtherComponent users={usersState} />;
};

我有同样的问题的重新渲染对象道具，如果道具是一个对象JSON.stringify(obj)，并将其设置为功能组件的关键。为react钩子设置一个id键对我来说并不适用。奇怪的是，要更新组件，你必须在键上包含所有对象属性并将其连接到那里。

function Child(props) {
  const [thing, setThing] = useState(props.something)
  
  return (
   <>
     <div>{thing.a}</div>
     <div>{thing.b}</div>
   </>
  )
}

...

function Caller() {
   const thing = [{a: 1, b: 2}, {a: 3, b: 4}]
   thing.map(t => (
     <Child key={JSON.stringify(t)} something={thing} />
   ))
}

现在，任何时候thing对象在运行时改变了它的值，子组件将正确地重新呈现它。

遵守不变性

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

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.

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