在 React.js 中访问 JSON 对象数组答案

【问题标题】：Access a JSON array of objects in React.js在 React.js 中访问 JSON 对象数组
【发布时间】：2021-12-21 14:00:38
【问题描述】：

我是 React.js 的新用户。我有一组对象，我只是想登录到控制台。我可以记录完整的“指标”数组，但是当我尝试访问特定索引时；我收到一条消息“无法读取未定义的属性（读取'1'）”

我需要访问这个数组，以便我可以使用 UI 上的值。附上控制台截图...console.log() screenshot

这是正在读取的数据示例：

{isAvailable: true, state: 'API State: New API data received', timestamp: '2021-11-08 14:56:51.867426', metrics: Array(147), Symbol(topic): 'my-topic'} isAvailable: true metrics: Array(147) [0 … 99] 0: {name: 'ESM_DATA.ESM_INFOS[1].TICK_COUNT', value: '1472700451', type: 'DINT'} 1: {name: 'UT59_DO_RDOL', value: false, type: 'BOOL'} 2: {name: 'UT51_DO_BF', value: false, type: 'BOOL'} 3: {name: 'UT129_DNL', value: false, type: 'BOOL'}

我使用的代码是这样的……

const PubSubFunctional = () => {
  
  const [arrayData, setArrayData] = useState([]);
  useEffect(() => {
    PubSub.subscribe('testingtopic').subscribe({
      next: (data) => {
    
        try {
     
          setArrayData(data.metrics);
          //console.log('value', data.value);
        } catch (error) {
          console.log('Error, Try again!');
        }
      },
      error: (error) => console.error(error),
      close: () => console.log('Done'),
    });
  }, []);

  console.log('1:', arrayData[1]);

【问题讨论】：

请澄清一下，是arrayData的截图吗？
请以文本形式提供数据样本，而不是文本图片。您可能需要使用tour 并阅读How to Ask，以便为以后的问题做好准备。这里的问题是您正在尝试记录尚未填充的数组元素； useEffect、next、setArrayData 所有这些都是异步的，并且在生命周期的不同时间发生。
这能回答你的问题吗？ Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
@HereticMonkey 这是 json 数据的文本示例：{isAvailable: true, state: 'API State: New API data received', timestamp: '2021-11-08 14:56:51.867426 '，指标：数组（147），符号（主题）：'我的主题'} isAvailable：真实指标：数组（147）[0 ... 99] 0：{名称：'ESM_DATA.ESM_INFOS[1].TICK_COUNT'，值：'1472700451'，类型：'DINT'} 1：{名称：'UT59_DO_RDOL'，值：false，类型：'BOOL'} 2：{名称：'UT51_DO_BF'，值：false，类型：'BOOL'} 3：{名称：'UT129_DNL'，值：false，类型：'BOOL'}
@AGE 是的。我在下面的评论中附上了原始数据的文本示例。

标签： arrays reactjs json

【解决方案1】：

问题在于，在useEffect 中，您订阅了一些（可能是远程的）源，这些源将在一段时间后将数据发送到您的应用程序，然后通过setArrayData 将新数据排入队列。钩子的设置器有效地将新值添加到组件的队列中，并告诉它“嘿组件，我需要你尽快用这个钩子的新值重新渲染”。但是，与此同时，您的应用程序的剩余代码会继续执行。这会导致尝试访问数组的元素 [1] 失败。

这也是您在 REST 调用和 useEffect 和 useState 组合中经常遇到的情况。

在这种情况下，您可以做的最好的事情通常是在数据未完全加载时不渲染组件或提供回退。这还有一个额外的优势，即如果您正在与之交互的特定端点出现中断，您的应用程序将不会发疯。

【讨论】：

是的。这似乎是我面临的问题。虽然我不确定处理它的最佳方法。