如何更新子组件中的useState钩子?

Question

我是React Hooks的新手，无法理解如何在子组件中放置useState()函数，无论是在子组件的主体中还是在子组件的内部函数中，像这样:

function Parent () {
const [counter, setCounter] = React.useState();
return (
<Child counter={counter} setCounter={setCounter}/>
)
}
function Child (props) {
const counter = props.counter;
const setCounter = props.setCounter;
React.useEffect(() => {
setCounter(0);
})
const increment = () => {
setCounter(1);
}
return (
<div> {counter} <button onClick={increment}>Increase Count</button> </div>
)
}

我的代码不断更新状态为0。怎么了?

请检查我的小提琴。

谢谢!

Answer 1

您错过了useEffect中的第二个参数。

useEffect将在每次渲染时触发，如果第二个参数不存在，它将再次将更改的值重置为0

React.useEffect(() => {
setCounter(0);
},[])

完整代码示例

function Parent () {
const [counter, setCounter] = React.useState();
return (
<Child counter={counter} setCounter={setCounter}/>
)
}
function Child (props) {
const counter = props.counter;
const setCounter = props.setCounter;
React.useEffect(() => {
setCounter(0);
}, [])
const increment = () => {
setCounter(counter + 1);
}
return (
<div> {counter} <button onClick={increment}>Increase Count</button> </div>
)
}

Answer 2

你的代码工作了:https://codesandbox.io/s/billowing-bird-p9xzp?file=/src/App.js

但是这里有几件事需要考虑:

1-你可以在const [counter, setCounter] = React.useState(0);

2-你不需要在子组件

中使用effect

Answer 3

你的useEffect钩子缺少一个依赖数组，所以每次子组件呈现时都会调用它。这意味着每次单击increment时，状态被设置为1，但随后useEffect立即再次触发并将计数重置为0。通过在useEffect的末尾放置一个空的依赖数组来修复这个问题(这意味着它只会在组件第一次挂载时触发一次):

React.useEffect(() => {
setCounter(0);
}, [])

如果你想让你的按钮每次都增加1个计数你必须将setCounter设置为1 +之前的状态，否则每次点击时计数器都会保持1

const increment = () => {
setCounter(prevCounter => prevCounter + 1);
}