javascript - 如何使用 react 向在状态中初始化的 map 添加值？

Question

我有申请，我需要保留搜索历史，我认为 Map适合这里:

const [searchHistory, setSearchHistory] = useState(new Map());

要更新它，请使用 setSearchHistory(new Map([[text, result.repos]]));但它用新 map 替换了 map ，你能告诉我如何为在状态中初始化的 map 添加值(value)吗？

Answer 1

useState 返回的状态更新函数不会像 this.setState() 那样合并状态在基于类的组件中。在功能组件中，您必须手动将旧状态与新状态合并。
您正在传递新的 Map反对setSearchHistory ，因此它将完全覆盖旧状态。
您可以通过首先复制旧 Map 中的条目来更新状态。反对新的Map对象，然后在状态中添加要添加的新条目。最后，通过这个新的Map反对setSearchHistory .

// copy (shallow) the old map's entries in the new Map
const updatedMap = new Map(searchHistory);  
// add the new entry in the 'updatedMap'
updatedMap.set(key, value);
// update the state
setSearchHistory(updatedMap);