reactjs - 如何在父组件中更新正确的状态值，该父组件使用 react 中的钩子(Hook)从子组件获取其值？

Question

我正在做一个 React 项目，对使用当前正确的状态值有疑问。我在一个包含父组件和子组件的小型虚拟项目中重现了这个问题。 Child 从 Parent 组件向下传递 props，一个状态变量和一个使用 react Hook (useState) 更新所述状态的函数。在驻留在 Parent 组件中的原始函数中，调用了第二个函数，该函数根据当前状态执行操作。我有控制台日志和结果显示传递的函数发送回正确的值来更新，但是下面的函数不使用更新的值，而是似乎总是落后一个渲染。

我尝试过使用 async/await 以及 useEffect Hook 。我已经能够在这个小型虚拟项目中使用 useEffect 的一些变体获得“预期”结果，但是它并没有转化为实际项目二重奏，因为它们是更多的函数调用，也取决于状态值，尽管我可能只是误解/做错了什么。

export const Parent = () => {

    const [count, setCount] = useState(0);
    const [fruit, setFruit] = useState(null);

    const counter = (index) => {
        console.log("index passed in: ", index);
        setCount(index);
        secondMethod()
    }

    const secondMethod = () => {
        console.log('state of count in second method', count);
        const arr = ['apple', 'cherry', 'orange', 'kiwi', 'berry'];
        setFruit(arr[count]);
    }

    return (
        <div>
            <p>Hello from Parent, current count: {count}</p>
            <Child counter={counter} count={count}/>
            <p>result of second method: {fruit}</p>
        </div>
    );
}

export const Child = ({ counter, count }) => {
    return (
        <div>
            <p>Child comp</p>
            <button onClick={() => counter(count + 1)}>
                Click on send counter
            </button>
        </div>
    );
}

index 上的控制台日志值以及 { count } 输出都是正确的。来自 secondMethod 的控制台日志的结果以及 setFruit 的状态不正确并且使用来自后面一个渲染的状态？因此计数将显示为 1，但 secondMethod 的计数值仍为 0，因此显示“apple”而不是“cherry”。感谢您提供的所有帮助/建议，谢谢!

Answer 1

React 状态更新操作是异步的，并且是批处理的以提高性能。无法保证 console.log('state of count in second method', count); 会反射(reflect)更新后的状态。

方案一:使用secondMethod中的index值作为参数传入

解决方案 2: count 更新后，使用 useEffect 更新 fruit钩子(Hook)。将 secondMethod 替换为:

useEffect(() => {
    console.log('state of count in useEffect', count);
    const arr = ['apple', 'cherry', 'orange', 'kiwi', 'berry'];
    setFruit(arr[count]);
}, [count, setFruit]);

解决方案 3:如果您的状态严重依赖于彼此，那么也许它们应该属于同一个状态。这样您就可以使用 setState 的函数版本，它始终接收正确的先前值。

// join separate states together
const [fruitCount, setFruitCount] = useState({ count: 0, fruit: null });

const counter = index => {
    setFruitCount({ count: index });
    secondMethod();
};

const secondMethod = () => {
    const arr = ["apple", "cherry", "orange", "kiwi", "berry"];
    // use setState function, count is taken from the previous state value
    setFruitCount(prevState => ({ ...prevState, fruit: arr[prevState.count] }));
};