如何在多个异步获取中同步用于 React Form Values 的 ES6 Map

Question

（我知道setter是异步的，我需要一个解决方案来改变统一的Map并保证Map中的所有值都是线程安全的。）

在我们的 React 应用程序中，我们没有使用单独的状态变量，而是有一个统一的

valueMap

ES6 Map 来收集所有表单值。它有一个名为

handleValueMapChange(key,value)

的变异子。输入连接到 valueMap，例如

value={props.valueMap.get('someField')}

。

// Definition
const [valueMap, setValueMap] = useState<Map<string, any>>(new Map());

// Mutator
const handleValueMapChange = (id: string, value: any) => {
    setValueMap(new Map<string, any>(valueMap.set(id, value)));
}

在某些输入上，有一个点会快速连续调用多个异步获取，它们将调用

handleValueMapChange

手动将一些值设置到表单中。

// Example of multiple async fetches that are called in quick succession to manually set into valueMap
const fetchXX = async () => {
   const response = await get<any>('app/fetchXX');
   if (response) {
       props.handleValueMapChange('fieldXX', response); 
    } 
};

我发现一些中间的

valueMap

条目丢失了。目标是最终正确设置所有这些

valueMap

字段，无论它们是从哪里设置的。假设

fetch1

集合

handleValueMapChange('field1','abc')

和

fetch2

集合

handleValueMapChange('field2','def')

，它们最初都是

''

。最后，

field1

中的

''

为空白 (

valueMap

)，并且

fetch1

中该值的中间设置丢失了。

所以ES6 Map不同步。我们选择 ES6 Map 表单方法是为了避免出现大量单独变量，同时也为了更轻松地将表单作为一个变量（而不是多个变量）提交到服务器。有没有办法解决这个问题？

Answer 1

这就是解决方案，

setValueMap(prevValueMap => {
    const newValueMap = new Map(prevValueMap);
    newValueMap.set(id, value);
    return newValueMap;
});

根据本文档使用了 updater 函数 =>