时间戳

首页 > 解决方案 > 如何在等待服务器响应时使用 typesctip 设置加载进度

reactjs - 如何在等待服务器响应时使用 typesctip 设置加载进度

问题描述

当服务器响应时，我想将加载状态更改为 false，但我不知道如何在它发生时更改状态。响应在另一个组件中，进度条在另一个组件中。一个简单的例子是这样的：

const Form: React.FC = () => {
   axios.get(someUrl).then(
   // changing a state to set the progress bar off
   ).catch(//catching error);
   ...
}


const Header: React.FC = () => {
  const [loading, setLoading] = useState(true);
  return (
    <MyProgressBar />
    ...
)}


const App: React.FC = () => {
  return (
    <Header />
    <Form />
    ...
  );
}

我没有在这里提到任何类型

标签： reactjstypescript

解决方案

在这里，您有状态，Header但想从Form. 一个组件无法更改其对等方的状态。

使固定

将状态向上移动一级，即移动到App. 然后你可以改变它Form并读取它Header等等。

推荐阅读