React中如何将useEffect内获取的局部数组设为可全局访问并在JSX中使用

当前JSX里读不到数组值，是两个React运行机制导致的：

• 用var声明的普通局部变量Names，不在React的渲染追踪范围内：你在useEffect里重新给它赋值后，React感知不到值的变化，不会触发组件重渲染，JSX永远读到的是组件初始化时的空数组值。
• 执行时序不匹配：useEffect的回调会在组件完成首次渲染之后才运行，第一次渲染时接口还没返回数据，Names本身是空数组，这时候取Names[0].ID自然拿不到值，甚至会触发空数组取属性的报错。

不需要把数组设置为全局可访问，用React自带的状态托管机制，就能实现接口返回值在JSX中正常访问，步骤：

• 用useState替代原来的普通局部变量，把数组状态托管给React，状态更新时会自动触发组件重渲染
• 在接口请求成功的回调里，通过状态更新方法修改数组值
• JSX渲染时加兜底判断，避免空数组取值报错

import { useState, useEffect } from 'react';
import { View } from 'react-native'; // 代码中的View为RN组件时保留该引入即可

export default Main_homepage = (props) => {
  // 用useState管理Names数组，初始值为空数组
  const [Names, setNames] = useState([]);

  useEffect(() => {
    fetch('https://www.amrutras.com/Items.php')
      .then((response) => response.json())
      .then((responseJson) => {
        // 接口返回后更新状态，触发组件重渲染
        setNames(responseJson);
        console.log(Names[0].ID);
      })
      .catch((error) => {
        console.error(error);
      })
    // 空依赖数组表示该请求仅在组件首次挂载时执行一次，避免重复发请求
  }, [])

  return(
    <View>
      {/* 先判断数组是否获取到数据，再做后续操作，避免空值报错 */}
      {Names.length > 0 && console.log(Names[0].ID)}
    </View>
  )
}

• 优先不建议把数组放到全局作用域：全局变量会带来状态污染、多组件实例数据互相干扰的问题，组件内部的状态管理是React官方推荐的标准方案
• 如果后续需要在其他非父子组件中访问这份数组数据，再考虑用Context、轻量状态管理库实现跨组件共享，不需要一开始就把数据提升到全局层级

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