React Native组件渲染时如何正确调用setState设为false且不报错

你遇到的报错是无限重渲染导致的，原因是你在Test组件的渲染同步逻辑中直接调用了setLoading：父组件渲染Test组件时会直接执行setLoading(false)，这会触发父组件状态更新、再次重渲染，重渲染后又会再次渲染Test、执行setLoading，循环往复触发React的渲染次数保护机制报错。

如果要在Test组件挂载渲染到页面后再修改父组件状态，需要把状态更新逻辑放到useEffect钩子中，useEffect会在组件渲染完成后才执行，不会打断渲染流程也不会触发循环更新。

修改后的参考代码如下：

import React, { useState, useEffect } from 'react'
import { Text, View } from 'react-native'

// 建议把内部组件移到外部，避免每次父组件重渲染都重新创建组件
const Test = ({ setLoading }) => {
  // 组件挂载完成后执行一次setLoading
  useEffect(() => {
    setLoading(false)
  }, [setLoading])

  return <Text>OFFLINE</Text>
}

const WordPage = () => {
  let value = false
  const [loading, setLoading] = useState(false)

  return (
    <View>
      {value ? <Text>ONLINE</Text> : <Test setLoading={setLoading} />}
    </View>
  )
}

export default WordPage

如果你的value是动态变化的变量，后续切换value为true再切回false时需要重复触发setLoading，上述代码已经可以满足需求：Test组件卸载再挂载会重新触发useEffect的逻辑。

内容的提问来源于stack exchange，提问作者SoF