时间戳

首页 > 解决方案 > 组件不会在道具更改时更新

javascript - 组件不会在道具更改时更新

问题描述

即使道具发生变化，该组件也不会更新。proprow是一个对象。 console.log("row", row")确实有效。并获得正确的数据console.log("Data", data)

import React, {useState, useEffect} from "react";

const Form = ({row}) => {
  const [data, setData] = useState(row);

  console.log("row", row); //consoleLog1

  useEffect(() => {
    setData(row);
  }, [row]);

  return (
    <>
      {Object.getOwnPropertyNames(data).map((head) => {
        console.log("Data", data);//consoleLog2
        return <input type="text" name={head} defaultValue={data[head] == null ? "" : data[head]} />;
      })}
    </>
  );
};

export default Form;

更新

将返回更改为<input value={data["ID"}>. 它确实更新了。有没有办法使用循环对象的属性创建表单？

标签： javascriptreactjs

解决方案

该defaultValue道具用于不受控制的组件。它设置了起始值，然后它就脱离了你的控制。所有更改将由input. 因此，当您重新渲染并传入新的 defaultValue 时，该值将被忽略。

如果您需要从外部更改值，则需要卸载并重新安装组件，这可以通过给它们一个更改的键来完成：

<input key={data[head].someUniqueIdThatChanged}

或者您需要以受控方式使用输入，这意味着使用valueprop 来代替。

value={data[head] == null ? "" : data[head]}

有关 React 中受控组件和不受控组件的更多信息，请参阅以下页面：

https://reactjs.org/docs/forms.html#controlled-components
https://reactjs.org/docs/uncontrolled-components.html

PS，将道具复制到状态几乎总是一个坏主意。直接使用道具即可：

const Form = ({row}) => {
  return (
    <>
      {Object.getOwnPropertyNames(row).map((head) => {
        return <input type="text" name={head} defaultValue={row[head] == null ? "" : row[head]} />;
      })}
    </>
  );
}

推荐阅读