功能组件React - 更新一个状态会导致整个页面重新渲染

Question

非常感谢您提前的帮助。 我不确定为什么当我在loadDataFunction()中更新percentageDone状态时，它会更新RenderData1Component，而实际上它不应该这样。它不应该只在data1改变时更新吗？

我有这样一段代码。

const [loading, setLoading] = useState(true);
  const [data1, setData1] = useState(null);
  const [percentageDone, setPercentageDone] = useState(0);


  LoadDataFunction(){
    // 在一个promise中调用多个api（假设有10个），并在每个api完成时调用setPercentageDone（）。
  }
  useEffect( () => {
     LoadDataFunction()
  },[])
  useEffect( () => {
     if (满足条件) {
       LoadDataFunction() // 重新加载最新数据
     }
  }, [条件])

  return (
    loading ? percentageDone
            : <RenderData1Component data={data1}>
  )

我只想在更新data1状态时才更新，而不是percentageDone。但是每当我更新setPercentageDone()时，它也会触发的重新渲染。

Answer 1

我不确定，但这可能对你有帮助。

const [loading, setLoading] = useState(true);
const [data1, setData1] = useState(null);
const [percentageDone, setPercentageDone] = useState(0);

const loadDataFunction = async () => {
  // 执行 API 调用并更新 percentageDone
};

useEffect(() => {
  loadDataFunction().then(() => {
    setLoading(false);
  });
}, []);

useEffect(() => {
  if (condition) {
    setLoading(true);
    loadDataFunction().then(() => {
      setLoading(false);
    });
  }
}, [condition]);

return (
  loading ? (
    <div>{percentageDone}% 加载中...</div>
  ) : (
    <RenderData1Component data={data1} />
  )
);

可能你正在给出多个条件，这可能会导致问题。也请检查一下。