useEffect 用于设置输入值时抛出错误

Posted 2023-03-05

【中文标题】useEffect 用于设置输入值时抛出错误

【英文标题】：useEffect throws an error when used to set input value

【发布时间】：2020-04-14 17:40:04

【问题描述】：

我正在尝试制作一个输入组件，该组件将由 react 控制，并且每当道具更改时都会更新它的值。

这就是我的做法：

import React from 'react';

function Component(props) 
  const [url, setUrl] = React.useState(props.value);

  React.useEffect(() => 
    setUrl(props.value);
  , [props.value]);

  function handleChange(event) 
    setUrl(event.target.value)
  

  return (
    <div>
      <input
        type="text"
        onChange=handleChange
        value=url
      />
    </div>
  );

虽然逻辑有效，但我仍然收到一条错误消息，提示我的组件正在从受控切换到不受控，但我不明白为什么会出现这种情况。

【问题讨论】：

检查初始props.value 是否不是undefined。或者提供一些默认的setState(props.value || '')

【参考方案1】：

我不明白这里useEffect 的目的。如果父组件的状态发生变化，那么子组件的 props 会自动更新，因为它会触发重新渲染。只需删除您的 useEffect 代码，它应该可以正常工作。

此外，我相信这会触发一个无限循环，因为每次更新 url 时，都会触发 useEffect 挂钩，这将更新 url，这将触发 useEffect 等。

在props.value 上设置默认值也是一个好主意：

const [url, setUrl] = React.useState(props.value || '');

顺便说一句，我会为您的handleChange 方法使用useCallback。

const handleChange = React.useCallback((event) => setUrl(event.target.value), []);

这将记住函数以获得更好的性能。

【讨论】：

我所知道的是，如果没有对 useEffect 状态的调用仍未定义，props.value 由 react-redux mapStateToProps 提供，这可能是问题吗？

如果你使用 Redux 来管理状态，那么你不能使用useState。这不会更新 Redux 存储中的状态。你必须创建一个 action creator 而不是 useState 并更新它。无论哪种方式，您都不需要useEffect。

不，我不是想通过组件更新 redux 存储，我的意思是当 prop 改变时 state 值不会改变。

【参考方案2】：

改变

const [url, setUrl] = React.useState(props.value);

到

const [url, setUrl] = React.useState(props.value || '');

因为一开始props.value（和你的url）将是未定义的，然后是定义的。这意味着输入字段从不受控转换为受控。