javascript 使用获取的数据填充输入时存在问题：它们不会根据更改进行更新

nle07wnf 于 2023-05-05 发布在 Java

关注(0)|答案(2)|浏览(165)

我想从数据库中获取数据，然后将其填充到相应的字段中。然后我希望能够编辑它们并保存更改。但是，我有几个问题的文本字段。
已填充字段的图像：

如果我使用这样的东西：

const [lname, setLname] = useState("");

<TextField
  fullWidth
  label="Last name"
  name="lname"
  required
  value = { `${userDetails.lname}` || "" }
  onChange={(e) => setLname(e.target.value)}
/>

然后文本字段变成只读的，我认为这是因为一旦我使用了onChange，它就再次使用这里的常量值填充字段。
如果将value更改为defaultValue，则可以更新值，但初始值为undefined。
如果我使用这样的东西：

const [lname, setLname] = useState(userDetails.lname);

<TextField
  fullWidth
  label="Last name"
  name="lname"
  required
  value = {lname}
  onChange={(e) => setLname(e.target.value)}
/>

初始TextField变为空。
UserDetails的填充方式如下：

export default function ProfileDetails() {
  
  const { user } = useContext(UserContext);
  const [userDetails, setUserDetails] = useState({});
  const { dispatch, isFetching } = useContext(UserContext);

  useEffect(() => {
    axios
      .get("http://localhost:42690/api/users/user-details", {
        headers: { Authorization: `Bearer ${user.token}` },
      })
      .then((res) => {
        console.log(res.data.fetchedUser);
        setUserDetails(
           (prevState) => ( { ...prevState, ...res.data.fetchedUser })
        );
      })
      .catch((err) => {
        toast.error("Failure to Load Profile");
      });
  }, []);

有人能帮我解决这个问题吗？谢谢！

JavaScript

来源：https://stackoverflow.com/questions/76161774/having-issues-with-populated-inputs-with-fetched-data-they-are-not-updating-on

2条答案

按热度按时间

uoifb46i1#

对于一个输入，具有不同的状态userDetails和lname（在姓氏的情况下）不是一个好主意，这就是导致您的问题的原因。我建议您只使用userDetails，并根据正在更改的输入更新它，例如：
注意我添加的注解

export default function ProfileDetails() {
  const { user } = useContext(UserContext);
  const [userDetails, setUserDetails] = useState({});

  useEffect(() => {
    // The code that fetches data and updates userDetails goes here
  }, []);

  // One change handler for all inputs
  const handleInputsChange = (e) => {
    setUserDetails({ ...userDetails, [e.target.name]: e.target.value });
  };

  return (
    <>
      <TextField
        fullWidth
        label="First name"
        name="fname"
        required
        value={userDetails.fname}
        onChange={handleInputsChange}
      />
      <TextField
        fullWidth
        label="Last name"
        name="lname"
        required
        value={userDetails.lname}
        onChange={handleInputsChange}
      />
    </>
  );
}

赞(0）回复(0）举报 2023-05-05

oknwwptz2#

您必须添加useEffect以在userDetails.lname值可用时更新您的状态：

const [lname, setLname] = useState(userDetails.lname);

useEffect(() => {
  setLname(userDetails.lname);
}, [userDetails.lname]);

<TextField
  fullWidth
  label="Last name"
  name="lname"
  required
  value = {lname}
  onChange={(e) => setLname(e.target.value)}
/>

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 使用获取的数据填充输入时存在问题：它们不会根据更改进行更新

2条答案

相关问题

热门标签

最新问答