为什么在下面的伪代码示例中，当容器更改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对象在运行时改变了它的值，子组件将正确地重新呈现它。
其他回答
你应该使用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>
}
}
}
你的代码似乎无效。我不能测试这段代码。
因为如果父对象的道具改变了，子对象不会重新渲染，但是如果它的STATE改变了:)
你所展示的是: https://facebook.github.io/react/tips/communicate-between-components.html
它将通过道具将数据从父对象传递到子对象，但没有渲染逻辑。
你需要为父节点设置一些状态，然后在父节点更改状态上重新渲染子节点。 这可能会有所帮助。 https://facebook.github.io/react/tips/expose-component-functions.html
如果Child不维护任何状态，而只是呈现道具，然后从父组件调用它，那么您可能应该将它作为功能组件。除此之外，您还可以使用与功能组件(useState)的挂钩，这将导致无状态组件重新呈现。
此外，您不应该更改propas，因为它们是不可变的。维护组件的状态。
Child = ({bar}) => (bar);
我也遇到了同样的问题。 我有一个Tooltip组件，它正在接收showTooltip道具，我正在基于if条件在父组件上更新，它正在父组件中更新，但Tooltip组件没有呈现。
const Parent = () => {
let showTooltip = false;
if(....){ showTooltip = true; }
return(
<Tooltip showTooltip={showTooltip}></Tooltip>
)
}
我犯的错误是将showTooltip声明为let。
我意识到我做错了什么，我违反了渲染工作的原则，用钩子代替它。
const [showTooltip, setShowTooltip] = React.useState<boolean>(false);
考虑到道具的渲染限制和状态的增益，如果你使用反应钩子，你可以使用一些技巧。例如，您可以使用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} />;
};
