在 context 中顺序调用 hook 'setState' 来存储导致竞争条件问题的数据

Question

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

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

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

即举个例子

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 是异步的，但我想不出任何其他解决这个问题的方法

Answer 1

您可以pass the function到setState回调：

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

它在任何情况下都采用参数中的最新状态，因此如果您的更新取决于以前的状态，使用它总是更安全。

在 context 中顺序调用 hook 'setState' 来存储导致竞争条件问题的数据

Calling 'setState' of hook within context sequentially to store data resulting in race condition issues

reactjs

react-native

react-hooks