在React中使用useEffect钩子会导致几分之一秒的数据冲突吗？

Question

这是 React 文档中给出的使用 useEffect 获取数据的示例。

export default function Page() {
  const [person, setPerson] = useState('Alice');
  const [bio, setBio] = useState(null);

  useEffect(() => {
    let ignore = false;
    setBio(null);
    fetchBio(person).then(result => {
      if (!ignore) {
        setBio(result);
      }
    });
    return () => {
      ignore = true;
    };
  }, [person]);

当状态人员更改时，组件将使用新的人员名称重新渲染，然后 useEffect 运行并使用获取的数据设置状态 Bio。现在屏幕显示新的人名和简介。但是在 useEffect 运行之前，当组件使用新的人名重新渲染时，屏幕将在短时间内显示新的人名但旧的人的简历。我的理解是否正确，如果是的话有什么方法可以改变这种行为

我是一个新手，如果我的问题很愚蠢，请纠正我。

Answer 1

export default function Page() {
  const [person, setPerson] = useState('Alice');
  const [bio, setBio] = useState(null);
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    let ignore = false;
    setIsLoading(true)
    fetchBio(person)
      .then(result => {
        if (!ignore) {
          setBio(result);
        }
        setIsLoading(false)
      })
      catch(e => {
        console.error(e)
        setIsLoading(false)
      });
    return () => {
      ignore = true;
    };
  }, [person]);
  
  
  return (
    <>
      <h1>`Profile of ${person}`</h1>
      {isLoading ? <div>Loading...</div> : <>render(bio)</>}
    </>
  )
 }

看起来你需要一个变量来控制获取数据的状态。例如，我正在使用

isLoading

。有了它，您可以决定在等待新简介时显示什么，这是正在加载的 div... 文本