Reactjs 如何在从我的api获取之前和之后放置activityindicator

我有一个与我的api一起工作的登录设置，我需要在加载时放置一个activityindicator，我使用react钩子，因此没有太多关于它的信息，我知道我必须在抓取之前将其设置为true，当它完成时，再次将其设置为false，但我不能将activityindicator声明为与抓取api的文件相同的js

这是我的登录表单组件AuthForm

 export default function AuthForm  ({ errorMessage, onSubmit }) {

  const [vCellphone, setvCellphone] = useState('');
  const [vPassword, setvPassword] = useState('');
  const [secureTextEntry, setSecureTextEntry] = useState(true);

  onPassPress = () => {
    setSecureTextEntry(!secureTextEntry);
  }

  handleChange = e => {
    const { value, name } = e.target;
    this.setState({ [name]: value });
  };

  return (
    <View style={styles.container}>
      <Image style={styles.logo} source={require('../assets/Logotipo-All.png')} />
      <Text style={styles.textIniciar}>Iniciar sesión</Text>
      <Text style={styles.textIniciar}></Text>
      <View style={styles.inputContainer}>
        <TextInput style={styles.inputs}
          placeholder="Teléfono"
          underlineColorAndroid='transparent'
          onChangeText={newvCellphone => setvCellphone(newvCellphone)}
          keyboardType={'numeric'}
          value={vCellphone}
          autoCorrect={false}
          autoCompleteType = "off"
          required
        />
      </View>
      <View style={styles.inputContainer}>
        <TextInput style={styles.inputs}
          placeholder="Contraseña"
          secureTextEntry={secureTextEntry} 
          underlineColorAndroid='transparent'
          onChangeText={newvPassword => setvPassword(newvPassword)}
          value={vPassword}
          autoCorrect={false}
        />
        <TouchableOpacity  onPress={this.onPassPress}>
          <Image style={styles.inputIcon} source={require('../assets/Visualización.png')}/>
        </TouchableOpacity>
      </View>

      <TouchableOpacity style={[styles.buttonContainer, styles.loginButton]}  
        onPress={() => onSubmit({ vCellphone, vPassword })}>
        <Text style={styles.loginText}>INGRESAR</Text>
      </TouchableOpacity>
    </View>

  );
};

---

任何帮助都将被感激

尝试一下，在

AuthForm

中，使用vCellphone和vPassword在提交时创建一个名为加载传递的新状态，并在

ForceApi

将加载设置为true

设置加载（true）

之后再次将响应设置为加载为false

设置加载（false）

activityIndicator有一个称为“动画传递加载”的道具，当加载为真时，它将设置动画，当加载为假时，它将停止

像这样的

  const fetchData = async () => {
    setLoading(true);
    const res = await axios.get("${API_URL}");
    setData(
        res.data.map(el => {
          const fromApi = fetchIncomes(el.id);
          return {
            ...el,
            ...fromApi
          };
        })
      )
    setLoading(false);
  };```

I can remember I had use this method on one of my App, it works pretty well.

---

你愿意使用redux吗？

  const fetchData = async () => {
    setLoading(true);
    const res = await axios.get("${API_URL}");
    setData(
        res.data.map(el => {
          const fromApi = fetchIncomes(el.id);
          return {
            ...el,
            ...fromApi
          };
        })
      )
    setLoading(false);
  };```

I can remember I had use this method on one of my App, it works pretty well.