React 18 使用 setState 更改或更新属性

Question

你好 StackOverflow 社区

我正在尝试在子组件中使用 setState 更新 json 对象的状态，但它不起作用。数据属性为空。我做错了什么？

App.JS

const [userData, setUserData] = useState({
    firstName: "",
    lastName:"",
    email: "",
    code:"",
  })

return (
<div>
<Child parentInfo = {{userData, setUserData}} />
</div>
)

Child.js

function Child({parentInfo}) {
  const client = axios.create({
     baseURL: "http://localhost:7171/api/"
  });

  const handleSubmit = e => {
      e.preventDefault();
      
      client.post('public/someAPI',someData).then((response) => {
        if(response.status === 200){


          parentInfo.setUserData(prevData => ({...prevData,
                code: response.data.code
          })) 
          console.log(parentInfo) //NOT updated


          
      });
  }

  return(
    <header className="form-header">
       <h2>{parentInfo.userData}</h2>
     </header>
     <form className="form flex-col" onSubmit={handleSubmit}>
       
                  <button type="submit" >Submit</button>
     </form>
)
export default Child;

其中响应是相同的 json 但填充了更多数据。但是，即使在执行 setState 之后，Code 属性还是空的，尽管 reponse.data 包含一个代码值。 例如

response.data = {firstName: "test",
    lastName:"test",
    email: "test",
    code:"123",
}

Answer 1

从这里的代码来看，我猜你没有

await

回复：

parentInfo.setUserData({
     ...response.data,
     code: response.data.code}); 
}

您需要像这样等待网络调用的响应：

await response.data.code

：

Answer 2

你不是在传播旧的...prevData吗？

import axios from 'axios';

function Child({parentInfo}) {
  const client = axios.create({
    baseURL: "http://localhost:7171/api/"
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const someData = {}; // Add your data here
      
    client.post('public/someAPI', someData)
      .then((response) => {
        if (response.status === 200) {
          parentInfo.setUserData(prevData => ({
            ...prevData,
            code: response.data.code
          }));
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <div>
      <header className="form-header">
        <h2>{parentInfo.userData}</h2>
      </header>
      <form className="form flex-col" onSubmit={handleSubmit}>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default Child;

Answer 3

不知道prevData是什么

function Child({ parentInfo }) {
  const client = axios.create({
    baseURL: 'http://localhost:7171/api/',
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    client
      .post('public/someAPI', someData)
      .then((response) => {
        if (response.status === 200) {
          parentInfo.setUserData({
            code: response.data.code,
          });
        }
      })
      .catch(console.error);
  };

  return (
    <>
      <header className="form-header">
        <h2>{parentInfo.userData}</h2>
      </header>
      <form className="form flex-col" onSubmit={handleSubmit}>
        <button type="submit">Submit</button>
      </form>
    </>
  );
}
export default Child;