为什么在下面的伪代码示例中，当容器更改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仍然显示旧值。
当前回答
确认，添加一个密钥工作。我看了所有的文件想弄清楚原因。
React希望在创建子组件时高效。如果新组件与另一个子组件相同，它就不会呈现新组件，这使得页面加载更快。
添加Key会迫使React呈现新组件，从而重置新组件的状态。
https://reactjs.org/docs/reconciliation.html#recursing-on-children
其他回答
在子组件connect方法的mapStateToProps中定义更改的道具。
function mapStateToProps(state) {
return {
chanelList: state.messaging.chanelList,
};
}
export default connect(mapStateToProps)(ChannelItem);
在我的例子中，channelList的通道被更新了，所以我在mapStateToProps中添加了chanelList
确认，添加一个密钥工作。我看了所有的文件想弄清楚原因。
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>
}
}
}
你的代码似乎无效。我不能测试这段代码。
我有同样的问题的重新渲染对象道具，如果道具是一个对象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对象在运行时改变了它的值，子组件将正确地重新呈现它。
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在道具改变时改变状态。
