React Native中组件数组无法渲染显示问题排查

核心问题原因 #

1. 普通变量无法触发组件重渲染：你用var output = []这种普通变量存储渲染元素，即便后续给它赋值，组件也不会感知到变化并重新渲染，所以屏幕始终空白。
2. 异步状态更新的时序问题：setChampions是异步操作，调用后champions不会立刻更新，你在then回调里直接遍历champions，拿到的还是初始的空数组，导致后续生成渲染元素的循环根本没执行。

修复后的代码 #

const ChampionScreen = () => {
    const [champions, setChampions] = useState([]);

    useEffect(() => {
      AxiosService.getChampions()
      .then(data => {
        // 直接处理接口返回的data，无需依赖setChampions后的状态
        const champList = Object.values(data);
        setChampions(champList);
      }).catch(err => console.error(err))
    },[])

    return (
      <ScrollView>
        <View>
          {/* 直接在渲染阶段遍历状态变量生成元素 */}
          {champions.map((champion, idx) => (
            <View key={champion.id || idx}>
              <Text>{champion.name}</Text>
            </View>
          ))}
        </View>
      </ScrollView>
    )
}

额外优化点 #

• 优先用数据的唯一标识（比如champion.id）作为key，避免用数组索引，提升列表渲染性能。
• 不需要JSON.parse(JSON.stringify())克隆对象，直接使用接口返回的数据即可，除非你需要修改原对象且不想影响状态。

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