警告：组件正在将不受控制的输入更改为受控useEffectReactjs

问题描述

export default function CitySearch() {
  const defaultCity = "London";
  const [city,setCity] = useState(defaultCity);
  const address = useSelector((state) => state?.cityDetails?.city);
  const classes = useStyles();

  const handleOnChange = (e) => {
    setCity(e.target.value);
  };
  const handleOnBlur = () => {
    if (city) setCity(city);
    else if (address) setCity(address);
    else setCity(defaultCity);
  };

  useEffect(() => {
    setCity((prevstate) => address);
  },[address]);
  return (
    <Box className={classes.root}>
      <TextField
        label="City"
        variant="outlined"
        value={city}
        onChange={handleOnChange}
        onBlur={handleOnBlur}
      />
    </Box>
  );
}

代码工作正常，但在控制台上抛出此错误“警告：组件正在更改不受控制的输入以进行控制。这可能是由于值从未定义更改为已定义值引起的，这不应该发生。决定使用组件生命周期内受控或不受控制的输入元素。"

但是当我注释掉 useEffect 中的代码时错误消失

解决方法

尝试通过console.log(address)检查address的值。 如果地址的值为空或未定义，则会出现此错误。

试试这个

useEffect(() => {
    setCity((prevState) => address??'');
  },[address]);

如果地址的值为 undefined 或 null，这会将状态设置为空字符串。

如果地址未定义或为空，即避免 setCity 的另一种选择，即

useEffect(() => {
if(address) setCity((prevState) => address);
  },[address]);