Question

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

ex），如果用户在一个子组件中选择带有“ www.facebook.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;

Answer 1

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

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

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

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

1 个答案: