警告：一个组件正在改变一个不受控制的输入来控制（useEffect）Reactjs答案

【问题标题】：Warning: A component is changing an uncontrolled input to be controlled (useEffect) Reactjs警告：一个组件正在改变一个不受控制的输入来控制（useEffect）Reactjs
【发布时间】：2021-07-04 15:06:00
【问题描述】：

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里面的代码时，错误就消失了

【问题讨论】：

标签： input react-hooks user-input controlled-component

【解决方案1】：

尝试通过console.log(address)检查address的值。如果address的值为null或undefined，就会出现这个错误。

试试这个

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

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

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

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

【讨论】：

这是正确答案。检查是否有任何渲染设置了 null 或未定义的值。