<p>非常感谢您提前的帮助。 我不确定为什么当我在<code>loadDataFunction()</code>中更新<code>percentageDone</code>状态时，它会更新<code>RenderData1Component</code>，而实际上它不应该这样。它不应该只在data1改变时更新吗？</p> <p>我有这样一段代码。</p> <pre class="brush:php;toolbar:false;">const [loading, setLoading] = useState(true); const [data1, setData1] = useState(null); const [percentageDone, setPercentageDone] = useState(0); LoadDataFunction(){ // 在一个promise中调用多个api（假设有10个），并在每个api完成时调用setPercentageDone（）。 } useEffect( () =&gt; { LoadDataFunction() },[]) useEffect( () =&gt; { if (满足条件) { LoadDataFunction() // 重新加载最新数据 } }, [条件]) return ( loading ? percentageDone : &lt;RenderData1Component data={data1}&gt; )</pre> <p>我只想在更新<code>data1</code>状态时才更新<code>&lt;RenderData1Component data={data1}&gt;</code>，而不是<code>percentageDone</code>。但是每当我更新<code>setPercentageDone()</code>时，它也会触发<code>&lt;RenderData1Component data={data1}&gt;</code>的重新渲染。</p>

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} />
  )
);