为什么在下面的伪代码示例中，当容器更改foo.bar时，子不重新呈现?
Container {
handleEvent() {
this.props.foo.bar = 123
},
render() {
return <Child bar={this.props.foo.bar} />
}
Child {
render() {
return <div>{this.props.bar}</div>
}
}
即使我在修改Container中的值后调用forceUpdate()， Child仍然显示旧值。
当前回答
我有同样的问题的重新渲染对象道具，如果道具是一个对象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对象在运行时改变了它的值，子组件将正确地重新呈现它。
其他回答
我的案例涉及在props对象上有多个属性，并且需要在更改其中任何一个时重新渲染Child。 上面提供的解决方案是有效的，但为每个方案添加一个密钥变得乏味和肮脏(想象一下有15个……)如果有人面临这个问题，你可能会发现stringify props对象很有用:
<Child
key={JSON.stringify(props)}
/>
这样，对props上的每个属性的每次更改都会触发Child组件的重新呈现。
希望这能帮到别人。
根据React的理念，组件不能改变它的道具。它们应该从父进程接收，并且应该是不可变的。只有父节点可以更改其子节点的道具。
关于国家和道具的解释很好
另外，阅读这篇文章为什么我不能在react.js中更新道具?
你可以使用componentWillReceiveProps:
componentWillReceiveProps({bar}) {
this.setState({...this.state, bar})
}
这要归功于Josh Lunsford
当从函数和useState创建React组件时。
const [drawerState, setDrawerState] = useState(false);
const toggleDrawer = () => {
// attempting to trigger re-render
setDrawerState(!drawerState);
};
这行不通
<Drawer
drawerState={drawerState}
toggleDrawer={toggleDrawer}
/>
这是可行的(添加键)
<Drawer
drawerState={drawerState}
key={drawerState}
toggleDrawer={toggleDrawer}
/>
我有同样的问题的重新渲染对象道具，如果道具是一个对象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对象在运行时改变了它的值，子组件将正确地重新呈现它。
