0

関数コンポーネントを使用するため、UseState を使用してコンポーネントの状態を処理する必要があります。axios でデータをロードするときにスピナーを表示しようとしています:

import { Spinner } from 'react-bootstrap';

const MandatesPage = props => {

  const [mandates, setMandates] = useState([]);
  const [loading, setLoading] = useState(false); //  to handle spinner hide show

   useEffect(() => {
    setLoading(true);  // here loading is true
    console.log(loading)
    axios
        .get(`${config.api}/mandates`)
        .then(response => response.data["hydra:member"],setLoading(false)) // here loading is false
        .then(data => setMandates(data))
        .catch(error => console.log(error.response));
}, []);

 ...
  if (loading) return
    return (
        <Spinner animation="border" variant="primary" />
    );
}

return (
   .....  // return the other logic of my app
 )

}

私の問題は、スピナーが表示されないことです。setLoading(true) の後に console.log(loading) を配置しましたが、値が false になりました。 ここに画像の説明を入力

4

2 に答える 2

1

もちろんloading、設定は非同期であり、次のレンダリングでのみ true になるため、まだ false です。

次のレンダリングでは、読み込みが true になるため、読み込みスピナーが返されます。axios 呼び出しが 16 ～ 32 ミリ秒 (react の各レンダリングの通常のフレーム) よりも短い必要がある場合、読み込みが既に false に設定されているため、読み込みスピナーは表示されません。

于 2020-03-25T11:50:15.643 に答える