时间戳

首页 > 解决方案 > 如何在从我的 api 获取之前和之后放置一个活动指示器

reactjs - 如何在从我的 api 获取之前和之后放置一个活动指示器

问题描述

我有一个与我的 api 配合使用的登录设置我需要在加载时放置一个活动指示器，我正在使用反应挂钩，所以没有太多关于它的信息，我知道我必须在获取之前将其设置为 true 以及何时它fininsh再次将其设置为false，但我无法在与获取api的文件相同的js中声明activityindicator

这是我的登录表单组件，名为 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>

  );
};

这是我的 api 调用代码，称为 AuthContext

  const login  = dispatch => async ({ vCellphone, vPassword }) => {
    const response = await ForceApi.post('/LoginController.php', { vCellphone, vPassword });
    const Validar = response.data.error;
    await AsyncStorage.setItem('id', response.data.id);
    dispatch({ type: 'login', payload: response.data.id});
    if(Validar == false ){
    navigate('Panel');
    } 
};
export const {Provider, Context} = createDataContext(
    authReducer,
    { login, logout, clearErrorMessage, tryLocalSignin, guardar,},
    {id:null, vSolicitudeId:null,errorMessage: ''}, []
);

任何帮助将不胜感激

标签： reactjsreact-nativeaxios

解决方案

试试这个，在使用 vCellphone 和 vPasswordAuthForm创建一个称为加载传递的新状态，并在登录操作之前将加载设置为 true ，然后再将响应设置为加载到 falseonSubmitForceApisetloading(true)setLoading(false)

activityIndi​​cator 有一个称为动画传递加载的道具，当加载为真时它动画，当它停止时

像这样的东西

  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.

推荐阅读