React 代码在更改状态后不断重新渲染

Question

此代码在每次状态更改时不断重新渲染页面，并且当我添加图像时，它会无限地重新渲染而不会出错

const [adData, setAdData] = useState({
    name: "",
    link: "",
    fromDate: {},
    toDate: {},
    fromTime: {},
    toTime: {},
    iconEn: null,
    allViews: 0,
    userViews: 0,
  });
  const [iconEN, setIconEN] = useState(null);
  const [currentEnImg, setCurrentEnImg] = useState(null);
  const handleOnChange = (e) => {
    setAdData({ ...adData, [e.target.name]: e.target.value });
  };
  const handleOnCheck = (e) => {
    setAdData({ ...adData, [e.target.name]: e.target.checked});
  };
  if (iconEN) {
    const reader = new FileReader();
    reader.onload = () => {
      setCurrentEnImg(reader.result);
      setAdData({ ...adData, iconEn: iconEN });
    };
    reader.readAsDataURL(iconEN);
  }

我做错了什么以及如何解决它。

Answer 1

您可以在页面加载时添加 useEffects 钩子

useEffect(()=>{
  /*
  Query logic
  */
  console.log('i fire once');},[]);

在这个钩子中调用你在使用后进入页面时调用的那个函数，这段代码不会在每次改变状态时呈现它可能有帮助

Answer 2

问题在这里：

if (iconEN) {
    const reader = new FileReader();
    reader.onload = () => {
      setCurrentEnImg(reader.result);
      setAdData({ ...adData, iconEn: iconEN });
    };
    reader.readAsDataURL(iconEN);
  }

每个状态集函数都会重新渲染应用程序，并且在每次重新渲染时都会调用相同的状态集函数，这使得这个过程成为一个永无止境的循环。

解决方案：尝试使用适当的dependency变量或[] useEffect钩子，这个问题将得到解决。

在您的情况下，将您的登录名放在 useEffect 中，例如：

useEffect(() => {
     if (iconEN) {
        const reader = new FileReader();
        reader.onload = () => {
          setCurrentEnImg(reader.result);
          setAdData({ ...adData, iconEn: iconEN });
        };
        reader.readAsDataURL(iconEN);
      }
}, []);