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

Question

提前感谢大家的帮助。 我不知道为什么当我更新

percentageDone

中的

loadDataFunction()

状态时，会更新不应该更新的

RenderData1Component

。不是应该只在 data1 改变时才更新吗？

我有一段这样的代码。

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


  LoadDataFunction(){
    // calling multiple apis (let say 10) in a promise and call setPercentageDone() whenever 1 of the Apis is done.
  }
  useEffect( () => {
     LoadDataFunction()
  },[])
  useEffect( () => {
     if (condition are met) {
       LoadDataFunction() // Reload Data All over again for latest data
     }
  }, [condition])

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

我只想在更新

<RenderData1Component data={data1}>

状态而不是百分比完成时更新

data1

。但每当我更新 setPercentageDone() 时，它也会触发重新渲染

<RenderData1Component data={data1}>

Answer 1

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

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

const loadDataFunction = async () => {
  // Perform API calls and update percentageDone
};

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

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

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

您可能给出了多个条件，这可能会导致问题。也检查一下。