React 钩子从多个子组件更新父状态答案

【问题标题】：React hooks updating a parent state from multiple child componentsReact 钩子从多个子组件更新父状态
【发布时间】：2020-07-20 13:52:20
【问题描述】：

我的父组件复制子组件 onClick。我的目标是针对每个子组件，在用户输入选择值和文本字段值后，它会附加到父组件的地图值上。我使用了一种传入编辑地图对象的函数的方法，但是在控制台日志记录之后，我意识到它只是为每个子组件提交重置地图值。有关如何解决此问题的任何建议？

ex) 如果用户在一个子组件中选择带有“www.instagram.com/user”的 instagram，在另一个子组件中选择带有“www.facebook.com/user”的 facebook，则父组件最终将拥有一张两个键值对。

父组件（Admin.js）

const Admin = () => {
  const links = new Map();
  const [newLink, setNewLink] = useState([]);

  const addLinkToMap = (type, url) => {
    links.set(type, url);
  }

  return (
    <>
      {newLink ? newLink.map(child => child) : null}
        <Button onClick={() => {
           setNewLink(
             [ ...newLink, 
               <AddNewLink key={Math.random()} linkMap={addLinkToMap}/>
             ]
        )}}>
          Add new social media
        </Button>
    </>
  );
}

export default Admin;

子组件 (AddNewLink.js)

const AddNewLink = props => {
  const [socialMedia, setSocialMedia] = useState('');
  const [url, setUrl] = useState('');
  const linkMap = props.linkMap;

  const handleSubmit = () => {
    linkMap(socialMedia, url);
  }

  return (
    <>
      <FormControl>
        <InputLabel>Select Social Media</InputLabel>
          <Select
            value={socialMedia}
            onChange={e => {setSocialMedia(e.target.value)}}
          >
            <MenuItem value={'facebook'}>Facebook</MenuItem>
            <MenuItem value={'instagram'}>Instagram</MenuItem>
            <MenuItem value={'tiktok'}>TikTok</MenuItem>
          </Select>
      </FormControl>
      <form>
        <TextField label="Enter link" onChange={e => {setUrl(e.target.value)}}/>
      </form>
      <div>
        <Button onClick={() => handleSubmit()}>Submit</Button>
      </div>
    </>
  )
}

export default AddNewLink;

【问题讨论】：

您需要为每个子组件拥有一个单独的状态或具有 3 个键的对象。并将该对象作为道具发送到子组件。 {“fb”：“某事”，“insta”：“某事”，“tiktok”：“某事”}。并制作一个回调函数并将其作为道具发送下来，该道具在父级中运行。它将首先检查哪个组件正在调用该函数并相应地更新该状态。

标签： javascript reactjs react-hooks

【解决方案1】：

问题在于，每当您通过调用setLink 设置状态时，您的函数就会再次被调用，这意味着变量links 的值会在每次状态更改时重置，解决此问题的一种方法是使用useState 调用为links 映射创建变量。像这样：

const [links, setLinks] = useState({});

const addLinkToMap = (type, url) => {
    setLinks({
       ...links,
       type: url
     });
}

【讨论】：