时间戳

首页 > 解决方案 > 在上下文中按顺序调用钩子的“setState”以存储数据，从而导致竞争条件问题

reactjs - 在上下文中按顺序调用钩子的“setState”以存储数据，从而导致竞争条件问题

问题描述

我创建了一个上下文来存储某些组件的值，以便在应用程序的其他地方显示。

我最初有一个显示组件，当这些源组件被激活时，它会使用状态，但这会导致渲染时间变慢，因为每次所选组件更改时都会使用新状态重新渲染该组件。

为了解决这个问题，我想为每个源组件创建一个单独的组件并使用初始值渲染它们，并且仅在源组件值更改时重新渲染。

即为了一个例子

const Source = (props) => {
    const { name, some_data} = props;
    const [setDataSource] = useContext(DataContext);

    useEffect(() => {
        setDataSource(name, some_data)
    }, [some_data]);

    return (
        ...
    );
}

const DataContextProvider = (props) => {

    const [currentState, setState] = useState({});

    const setDataSource = (name, data) => {
        const state = {
            ...currentState,
            [name]: {
                ...data
            }
        }
    }
    return (
        ...
    )
}


// In application 
<Source name="A" data={{
    someKey: 0
}}/>
<Source name="B" data={{
    someKey: 1
}}/>

我的提供者的状态将如下所示；

{
  "B": {
    "someKey": 1
  }
}

我相信这是因为 setState 是异步的，但我想不出任何其他解决方案来解决这个问题

标签： reactjsreact-nativereact-hooks

解决方案

您可以将函数传递给setState回调：

setState((state) => ({...state, [name]: data}))

在任何情况下，它都需要参数中的最新状态，因此如果您的更新依赖于先前的状态，那么使用它总是更安全。

推荐阅读