在React JS中如何从多维JSON数组中获取数据？

针对你提供的示例数据，这里整理了几种在React里获取并使用这些嵌套数据值的常用方式：

1. 直接访问特定位置的元素 #

如果明确要获取的元素在数组中的索引，可直接通过索引链式访问：

// 假设数据已存储在变量中
const response = {
  "result": {
    "task": "Hello",
    "data": [
      {
        "title": "Sample data one",
        "subtitle": "Sample subtitle data one",
        "amount": 100
      },
      {
        "title": "Sample data two",
        "subtitle": "Sample subtitle data two",
        "amount": 200
      },
      {
        "title": "Sample data three",
        "subtitle": "Sample subtitle data three",
        "amount": 300
      }
    ]
  }
};

// 获取第一个元素的title
const firstTitle = response.result.data[0].title;
// 获取第二个元素的amount
const secondAmount = response.result.data[1].amount;

console.log(firstTitle); // 输出 "Sample data one"
console.log(secondAmount); // 输出 200

2. 遍历数组渲染所有元素（React组件核心用法） #

在React组件中，通常需要遍历数组渲染所有子项，map方法是最常用的方式：

import React from 'react';

function DataList() {
  const response = {
    "result": {
      "task": "Hello",
      "data": [
        {
          "title": "Sample data one",
          "subtitle": "Sample subtitle data one",
          "amount": 100
        },
        {
          "title": "Sample data two",
          "subtitle": "Sample subtitle data two",
          "amount": 200
        },
        {
          "title": "Sample data three",
          "subtitle": "Sample subtitle data three",
          "amount": 300
        }
      ]
    }
  };

  return (
    <div>
      <h2>{response.result.task}</h2>
      <ul>
        {response.result.data.map((item, index) => (
          <li key={index}>
            <h3>{item.title}</h3>
            <p>{item.subtitle}</p>
            <span>金额: {item.amount}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default DataList;

注意：使用map时必须给每个子元素添加唯一key属性，用索引是简便方案，若数据自带唯一ID（如id字段），优先用唯一ID作为key。

3. 按条件筛选/查找元素 #

如果需要根据特定条件定位元素，可以用find、filter等数组方法：

// 查找amount为200的元素
const targetItem = response.result.data.find(item => item.amount === 200);
console.log(targetItem.title); // 输出 "Sample data two"

// 筛选所有amount大于150的元素
const filteredItems = response.result.data.filter(item => item.amount > 150);
console.log(filteredItems); // 输出包含第二、第三个元素的数组

处理异步获取的数据 #

如果数据是通过API请求异步获取的（比如用fetch或axios），需要在组件中处理加载状态：

import React, { useState, useEffect } from 'react';

function DataList() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 模拟API请求
    fetch('/your-api-url')
      .then(res => res.json())
      .then(response => {
        setData(response.result.data);
        setLoading(false);
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <ul>
        {data.map((item, index) => (
          <li key={index}>
            <h3>{item.title}</h3>
            <p>{item.subtitle}</p>
            <span>金额: {item.amount}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default DataList;

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