Question

我试图找到一种方法来模仿callback的{{1}}功能，但要使用钩子。

我设法制作了一种模仿this.setState({},() => {})函数的方法，但是返回了一个带有更新数据的更改结果的回调。

状态更新后，回调的接收返回，如从日志中可以看到的，回调接收仅在useState出现后返回，其行为类似于将console.log("App")与this.state一起使用。

问题在于，在修改后的callback的{{1}}内部，即使在更新应用程序后调用它，也看不到状态的更新，也就是说，在内部如果我尝试打印更新状态，则看不到。

根据您的要求，有一种解决方案可以执行某些操作以使其更新。

callback

setState

Answer 1

使用钩子，状态已更新时，您已经已获得回调：您的组件函数再次被调用。这是钩子的基本方面，更新状态使React再次调用您的组件函数。

示例：

const { useState } = React;

const Example = () => {
    const [counter, setCounter] = useState(0);
    console.log(`Example called, counter = ${counter}`);
    return (
        <div>
            {counter} <input type="button" value="+" onClick={() => setCounter(c => c + 1)} />
        </div>
    );
};

ReactDOM.render(<Example />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>

不需要任何其他的setter回调。组件是回调。

丹·阿布拉莫夫（Dan Abramov）有一篇很好的文章，真能重创这个here家。它是在解释useEffect的上下文中，但是它奠定的基础应该有所帮助。

Answer 2

如果我理解您要正确执行的操作，则认为您只需要将新的状态值作为参数传递给回调调用。这样，您无需将其保存在ref中，也无需从useEffect更新它：

function useStateCallback(initialState) {
    const [state, setState] = useState(initialState);

    return [
        state,
        (value, callback) => {
            setState(value);

            if (typeof callback === "function") {
                callback(value);
            }
        }
    ];
}

用回调反应Hooks useState

2 个答案: