将状态设置器传递给辅助函数有什么缺点吗?

Question

我是React的新手，只是测试一些简单的辅助函数。将状态设置器传递给辅助函数有什么缺点吗?这只是一个过于简单的例子:

App.js

import { useState } from 'react';
import increment from './helpers/increment';
import reset from './helpers/reset';
const App = () => {
const [counter, setCounter] = useState(0)
const [even, setEven] = useState(true)
return (
<div>
<div>{counter}</div>
<div>
<button onClick={() => increment(setCounter, setEven)}>INCREMENT</button>
<button onClick={() => reset(setCounter, setEven)}>RESET</button>
</div>
<div>Number is even: {even.toString()}</div>
</div>
);
}
export default App;

increment.js

const increment = (setCounter, setEven) => {
setCounter(current => {
setEven((current + 1) % 2 === 0 ? true : false)
return current + 1
})
}

export default increment;

reset.js

const reset = (setCounter, setEven) => {
setCounter(0)
setEven(true)
}

export default reset;

更新:看起来一个自定义钩子是我在这种情况下所需要的。(感谢@Houssam)

useCounter.js

import { useState } from "react";
const useCounter = () => {
const [counter, setCounter] = useState(0)
const [even, setEven] = useState(true)
const increment = () => {
setCounter(current => {
setEven((current + 1) % 2 === 0 ? true : false)
return current + 1
})
}
const reset = () => {
setCounter(0)
setEven(true)
}
return { counter, even, increment, reset }
}
export default useCounter

Answer 1

将状态更新函数传递给辅助函数并没有错，因为你只是在重构你的代码。

一个常见的模式是在组件内部定义这些辅助函数，但如果你确实需要在其他组件中使用它们，那么将它们定义为辅助函数是正确的做法。

你的问题的另一个解决方案是定义一个自定义钩子，封装counter和even状态，并返回increment和reset函数。您可以在文档中了解更多关于自定义钩子的信息。

如果你定义了一个自定义钩子，目标将是能够做如下事情:

const [counter, even, increment, reset] = useCounter(0);