Question

我是 Reactjs 的初学者。我正在使用相同的方式构建表单应用程序。在那里，我被要求从服务器设置输入字段的值，该值可由用户更新，即受控输入组件。

我在父状态中获取值，然后将值传递给子状态，并从那里设置输入字段的值。现在，当我更新父状态中的值时出现问题，然后该值不会在子状态中更新。

看下面的代码-

App.jsx

import { useEffect, useState } from "react";
import { Child } from "./child";
import "./styles.css";

export default function App() {
  const [details, setDetails] = useState({});

  useEffect(() => {
    fetch("https://reqres.in/api/users/2")
      .then((res) => res.json())
      .then((data) => setDetails(data));
  }, []);

  useEffect(() => {
    console.log("data of details", details?.data);
  }, [details]);

  return (
    <div className="App">
      <h1>Testing</h1>
      <Child details={details} setDetails={setDetails} val={details?.data} />
    </div>
  );
}

Child.jsx

import { useState } from "react";

export const Child = ({ details, setDetails, val }) => {
  const [value, setValue] = useState({
    save: true,
    ...val
  });

  const handleChange = (e) => {
    setValue({ ...value, email: e.target.value });
  };

  const handleSave = () => {
    setDetails({
      ...details,
      data: { ...details.data, email: value.email }
    });
    console.log("Data",value);
  };


  const handleDelete = () => {
    setDetails({ ...details, data: { ...details.data, email: "" } });
    console.log("Data",value);
  };

  return (
    <div className="cont">
      <input type="text" value={value.email} onChange={handleChange} />
      {value.save && <button onClick={handleSave}>save</button>}
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
};

代码沙盒链接： https://codesandbox.io/s/testing-m3mc6?file=/src/child.jsx:0-801

注意我在谷歌上搜索了解决方案，我也看到了一个 stackoverflow 问题，但这对我没有帮助，因为我使用的是功能性的反应方式。

任何其他实现此目的的方法将不胜感激。

Answer 1

在子组件中试试这个：

useEffect(()=>{
 setValue({
    value,
    ...val
  });
}, [val])

反应：父状态更新后子状态未更新

1 个答案: