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

Question

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

Answer 1

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

尝试这个

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

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

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

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