Question

当视图正在充电时，我需要等待状态改变，所以我必须多次调用 api，但如果我这样做

const [vWaitForCreditInfo, setvWaitForCreditInfo] = useState(true);
if (vWaitForCreditInfo === true){
    setLoading(true);
    setTimeout(() => {
      paycheck()
    }, 5000);
  }
  else{
    setLoading(false);
  }


  async function paycheck() {
    const vUserId = await AsyncStorage.getItem('vUserId');
    const response = await ForceApi.post('/GetUserStatusController.php', {vUserId});
    setvWaitForCreditInfo(response.vWaitForCreditInfo);
  };

return(
 {vWaitForCreditInfo == false ? (
   <Text style={styles.disclaimer}>
     ¡Hola! Por el momento no podemos otorgarte el préstamo ya que no cumples 
     con nuestras políticas internas, te recomendamos ponerte al corriente en 
     tus cuentas e intentar de nuevo en un mes. Cualquier duda quedamos al 
     pendiente, ¡saludos!
   </Text>) : null}
);

我遇到了太多的渲染问题，我试图将它包装在一个使用效果上，但它只执行一次并且不再寻找 api

问题是免责声明没有显示关于如何做到这一点有什么建议吗？

Answer 1

首先我需要给你一个提示：请不要对 conditional rendering 使用三元运算符，而是这样做（即使使用三元运算符，您的代码也无法工作，因为您有语法错误）：

if (!vWaitForCreditInfo) return null

 return (
    <Text style={styles.disclaimer}>
      ¡Hola! Por el momento no podemos otorgarte el préstamo ya que no cumples 
      con nuestras políticas internas, te recomendamos ponerte al corriente en 
      tus cuentas e intentar de nuevo en un mes. Cualquier duda quedamos al 
      pendiente, ¡saludos!
    </Text>
 )

谈谈您遇到的主要问题：

您应该在 useEffect Hook 内进行 API 调用，并且您不应该为了仅渲染一次（组件渲染时）传递依赖项。
您不应在 RFC 中使用 if 语句，而应在 useEffect 钩子中使用它。
您的组件处于更新状态的循环中，并将以无限方式重新渲染。

说得够多了，我的解决方案是：

const [vWaitForCreditInfo, setvWaitForCreditInfo] = useState(true);
const [loading, setLoading] = useState(false);

useEffect(() => {
    const  paycheck =  async () => {
        setLoading(true)
        const vUserId = await AsyncStorage.getItem('vUserId');
        const response = await ForceApi.post('/GetUserStatusController.php', {vUserId});

        if (response.vWaitForCreditInfo !== vWaitForCreditInfo) {
            setvWaitForCreditInfo(response.vWaitForCreditInfo);
        }

        setLoading(false)
    }

    paycheck()
 }, [])


 if (!vWaitForCreditInfo) return null

return (
   <Text style={styles.disclaimer}>
    ¡Hola! Por el momento no podemos otorgarte el préstamo ya que no cumples 
    con nuestras políticas internas, te recomendamos ponerte al corriente en 
    tus cuentas e intentar de nuevo en un mes. Cualquier duda quedamos al 
    pendiente, ¡saludos!
 </Text>
)

Answer 2

你应该看看useEffect hook

React.useEffect(() => {
 if(!vWaitForCreditInfo) {
  return setLoading(false)
}
},[vWaitForCreditInfo]);

并像这样触发你的 vWaitForCreditInfo

React.useEffect(() => {
    paycheck();
,[vUserId]);

类似的东西，取决于您何时需要重新加载

Answer 3

  const [vWaitForCreditInfo, setvWaitForCreditInfo] = useState();

  useEffect(() => {
     if(vWaitForCreditInfo) {
          paycheck()
     }
  }, [vWaitForCreditInfo]);

  async function paycheck() {
    const vUserId = await AsyncStorage.getItem('vUserId');
    const response = await ForceApi.post('/GetUserStatusController.php', {vUserId});
    setvWaitForCreditInfo(response.vWaitForCreditInfo);
  };

这里每次进行银行验证时，都会触发 useEffect。它只会使用新的 API 调用进行新的验证。

太多的重新渲染如果

3 个答案: