[英]React: stale props in child component
Here is the CodeSandBox link: https://codesandbox.io/s/stale-prop-one-g92sv?file=/src/App.js这是 CodeSandBox 链接: https ://codesandbox.io/s/stale-prop-one-g92sv ? file =/ src/App.js
I find the child components will not show the correct counter values after two button clicks, though the counter is actually incrementing:我发现子组件在单击两次按钮后不会显示正确的计数器值,尽管计数器实际上是在递增:
import "./styles.css";
import { useState } from "react";
const MyComponent = ({ value }) => {
const [counter] = useState(value);
return <span>{counter}</span>;
};
export default function App() {
const [counter, setCounter] = useState(0);
const isVisible = counter !== 1;
console.log(counter);
return (
<div className="App">
<div>
<button onClick={() => setCounter((counter) => counter + 1)}>
Click me
</button>
</div>
{isVisible && (
<div>
Message 1 is: <MyComponent value={counter} />
</div>
)}
<div style={isVisible ? { display: "block" } : { display: "none" }}>
Message 2 is: <MyComponent value={counter} />
</div>
</div>
);
}
I try to force child component re-render by assigning counter to its key:我尝试通过将计数器分配给其键来强制子组件重新渲染:
export default function App() {
const [counter, setCounter] = useState(0);
const isVisible = counter !== 1;
console.log(counter);
return (
<div className="App">
<div>
<button onClick={() => setCounter((counter) => counter + 1)}>
Click me
</button>
</div>
{isVisible && (
<div>
Message 1 is: <MyComponent key = {counter} value={counter} />
</div>
)}
<div style={isVisible ? { display: "block" } : { display: "none" }}>
Message 2 is: <MyComponent key = {counter} value={counter} />
</div>
</div>
);
}
It works, but I still have no idea why the previous one does not work, since the props.value
in MyComponent
has changed... Thanks in advance.它有效,但我仍然不知道为什么前一个无效,因为MyComponent
的props.value
已更改...提前致谢。
With this:有了这个:
const MyComponent = ({ value }) => {
const [counter] = useState(value);
return <span>{counter}</span>;
};
You're telling React to set the initial state to the first value
prop passed to the component, on mount.您告诉 React 将初始状态设置为在挂载时传递给组件的第一个value
prop。
When the component re-renders, the component has already been mounted, so the value passed to useState
is ignored - instead, the counter
in that child is taken from the state of MyComponent
- which is equal to the initial state in MyComponent
, the initial value
prop passed.当组分重新呈现,该组件已被安装,所以传递到值useState
被忽略-相反,则counter
在儿童从状态采取MyComponent
,它等于在初始状态- MyComponent
,初始value
道具通过。
For what you're trying to do, you only have a single value throughout the app here that you want to use everywhere, so you should only have one useState
call, in the parent - and then render the counter in the child from the prop, which will change with the parent state.对于你想要做的事情,你在整个应用程序中只有一个值,你想在任何地方使用,所以你应该只有一个useState
调用,在父级 - 然后从道具渲染子级中的计数器,这将随着父状态而改变。
const MyComponent = ({ value }) => {
return <span>{value}</span>;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.