Question

我是React Hooks的新手，我正面临这个问题：

应用程序组件使用useEffect初始化localStorage中的地图
它将此地图传递给子组件Hello

然后：

子组件以其自己的状态复制此地图，并使用其管理值版本。

问题是，正如您在此stackblitz控制台日志中所看到的：

parent map: undefined --- child map: undefined // map is first pass empty to the child component
parent map: world --- child map: undefined     // then it's populated by parent component effect but child state is not updated

如何管理子组件中映射值的正确初始化？不要犹豫，挑战整件事，我不确定在这里正确使用效果。

Answer 1

像这样的复制状态是一种反模式，因为它会创建两个不必要的事实来源。最好将值以及onChange处理程序传递给子级。这样，您就有了一个真实的来源，但是您可以访问并控制子组件的价值。

我在这里有示例：https://stackblitz.com/edit/react-hpxvcf

此外，更改状态时还必须创建new Map()，以便React知道要重新渲染组件。

Answer 2

您需要在子组件中使用useEffect，以复制父项向下发送的更改道具，因为您正在从该道具初始化本地状态。

import React, {useEffect, useState } from 'react';

export default ({ initialMap }) => { 

  const [map, setMap] = useState(new Map(initialMap));
  console.log(`parent map: ${initialMap.get('name')} --- child map: ${map.get('name')}`);

  // this is what you need
  useEffect(() => {
    setMap(new Map(initialMap))
  }, [initialMap])

  const onChange = (value) => {
    setMap(prevMap => {
      prevMap.set('name', value);
      return prevMap;
    });
  };

  return (
    <div>
      <label>Input initial value should be 'world':</label>  
      <input value={map.get('name')} 
        onChange={e => onChange(e.target.value)} />
    </div>
  ); 
};

React Hooks：如何更新父组件中由useEffect初始化的道具

2 个答案: