反应子状态没有得到更新

Question

我有一个使用挂钩初始化状态的父组件。我将钩子的状态和 setState 传递给子对象，但是每当我更新多个子对象的状态时，它们都会更新不是最新状态的状态。

重现问题：当您建立链接并写入您的信息并单击提交时，它会成功附加到父状态。如果在那之后添加另一个，它也会成功附加到父状态。但是当你返回并在第一个链接上按提交时，它会出于某种原因破坏第二个链接。请在我的 codesandbox 上试用。

基本上我想要的是一个创建新表单的按钮。在每种形式中，您都可以选择一种社交媒体类型，如 fb、instagram、tiktok，还可以输入一个文本字段。这些数据存储在状态中，最后当您单击应用更改时，我希望它存储在我的数据库中，即 firestore。你能帮我解决这个问题吗？这是一个代码沙箱。

https://codesandbox.io/s/blissful-fog-oz10p

这是我的代码：

管理员.js

import React, { useState } from 'react';

import Button from '@material-ui/core/Button';

import AddNewLink from './AddNewLink';

const Admin = () => {

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

  const [newLink, setNewLink] = useState([]);

  const updateLinks = (socialMedia, url) => { 

    setLinks({

      ...links,

      [socialMedia]: url

    })

  }

  const linkData = {

    links,

    updateLinks,

  }

  

  const applyChanges = () => {

    console.log(links);

    // firebase.addLinksToUser(links);

  }

  return (

    <>

      {newLink ? newLink.map(child => child) : null}

      <div className="container-sm">

        <Button

        type="submit"

        fullWidth

        variant="contained"

        color="primary"

        onClick={() => {

          setNewLink([ ...newLink, <AddNewLink key={Math.random()} linkData={linkData} /> ])}

        }

      >

        Add new social media

      </Button>

      <Button

        type="submit"

        fullWidth

        variant="contained"

        color="primary"

        style={{marginTop: '50px'}}

        onClick={() => applyChanges()}

      >

        Apply Changes

      </Button>

      <h3>{JSON.stringify(links, null, 4)}</h3>

      </div>

    </>

  );

}

export default Admin;

Answer 1

我所看到的是 AddNewLink 中的链接将是一个陈旧的关闭，但在你的问题中你永远不会使用它。这是您的代码“有效”，因为您没有描述它应该做什么它总是“有效”const { useState } = React;const AddNewLink = (props) => {&nbsp; const [socialMedia, setSocialMedia] = useState('');&nbsp; const [url, setUrl] = useState('');&nbsp; const { updateLinks, links } = props.linkData;&nbsp; console.log('links is a stale closure:', links);&nbsp; const handleSubmit = () => {&nbsp; &nbsp; updateLinks(socialMedia, url);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <select&nbsp; &nbsp; &nbsp; &nbsp; value={socialMedia}&nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setSocialMedia(e.target.value);&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <option value="">select item</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value={'facebook'}>Facebook</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value={'instagram'}>Instagram</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value={'tiktok'}>TikTok</option>&nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; id="standard-basic"&nbsp; &nbsp; &nbsp; &nbsp; label="Enter link"&nbsp; &nbsp; &nbsp; &nbsp; style={{ width: '95%' }}&nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setUrl(e.target.value);&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; type="submit"&nbsp; &nbsp; &nbsp; &nbsp; variant="contained"&nbsp; &nbsp; &nbsp; &nbsp; color="primary"&nbsp; &nbsp; &nbsp; &nbsp; style={{ marginBottom: '30px' }}&nbsp; &nbsp; &nbsp; &nbsp; onClick={() => handleSubmit()}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; Submit&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; </div>&nbsp; );};const Admin = () => {&nbsp; const [links, setLinks] = useState({});&nbsp; const [newLink, setNewLink] = useState([]);&nbsp; const updateLinks = (socialMedia, url) =>&nbsp; &nbsp; setLinks({&nbsp; &nbsp; &nbsp; ...links,&nbsp; &nbsp; &nbsp; [socialMedia]: url,&nbsp; &nbsp; });&nbsp; const linkData = {&nbsp; &nbsp; links,&nbsp; &nbsp; updateLinks,&nbsp; };&nbsp; const applyChanges = () => {&nbsp; &nbsp; console.log(links);&nbsp; &nbsp; // firebase.addLinksToUser(links);&nbsp; };&nbsp; return (&nbsp; &nbsp; <React.Fragment>&nbsp; &nbsp; &nbsp; {newLink ? newLink.map((child) => child) : null}&nbsp; &nbsp; &nbsp; <div className="container-sm">&nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="submit"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; variant="contained"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="primary"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setNewLink([&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...newLink,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <AddNewLink&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={Math.random()}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; linkData={linkData}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Add new social media&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="submit"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; variant="contained"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="primary"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ marginTop: '50px' }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => applyChanges()}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Apply Changes&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; <h3>{JSON.stringify(links, null, 4)}</h3>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </React.Fragment>&nbsp; );};ReactDOM.render(<Admin />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><div id="root"></div>将 jsx 置于本地状态并不是一个好主意，而是将数据保存在状态中并将其传递给每次渲染的组件。