React 输入 defaultValue 重新渲染答案

【问题标题】：React input defaultValue re-renderingReact 输入 defaultValue 重新渲染
【发布时间】：2021-01-25 13:53:41
【问题描述】：

我正在使用带有 react 的表单，但我无法更新我的输入值。我有两个列表按钮。这些按钮允许我调用不同的 json 对象并将它们传输到输入。我分别使用这些按钮。一些 json 对象可能有相似的键。转移这些相似性的输入没有变化。虽然不同键没有问题，但相同键的输入没有变化。我将 json 中的值作为 defaultValue 写入输入。默认值没有变化。我使用占位符来测试它。占位符继续工作没有任何问题。但是，defaultValue 没有更新。

{Object.keys(props.activeElement).map((key) => (
          <Form.Item label={key} name={key}>
            {inputRender(key)}
          </Form.Item>
  ))}

当点击相关按钮时，返回的jsons被设置为activeElement。

const inputRender = (key) => {
    return <Input defaultValue={props.activeElement[key]} />;
  };

你能帮帮我吗？

【问题讨论】：

很难用你分享的小代码说，但根据你的描述，我希望activeElement[key] 来自state（每次你点击一个可能会更新按钮）而不是来自props（这是静态的）。
你能提供一个可重现的例子吗？
不幸的是，我得到了与@secan 状态相同的结果
向元素添加一个键，并在每次需要更新值时更改它，它将强制元素重新渲染。
那我该怎么做。你能帮我吗@Michael

标签： javascript reactjs antd

【解决方案1】：

defaultValue 在第一次渲染时被缓存。所以即使props.activeElement[key] 指向一个新值，输入的值也不会改变。

更多关于 antd 的 FAQ.

【讨论】：

那么您对此有什么偏好建议吗？
为什么不使用value 和onChange，因为您有受控组件。
我没有使用 onChange，因为我使用的是 formOnChange。当我使用 Value 时，输入返回空。
@Gucal 你试过在Form 上使用initialValues 吗？
我试过但不幸的是这并没有解决我的问题:(

【解决方案2】：

我通过使用 ref 解决了这个问题。我创建了一个 ref 值。

const formRef = useRef ();

点击按钮我运行了这个。

formRef.current.setFieldsValue ({... json});

我在表单上使用了这个 refi。

ref = {props.formRef}

【讨论】：