正确调用json postData

Question

你好，堆栈溢出成员。因此，我想在json组件中调用这个动作嵌套数组，但我不知道如何调用。如果我能得到一些很好的帮助

import React from 'react'
import data from "../data.json";
function Action() {
    return (
        <div>
         {data.map((postData) => {
        console.log(postData);
        return(
            <div key={postData.id}>
              <h1 >{postData.action.name}</h1>
            </div>    
        )})}
        </div>
    )
}

export default Action

[
 {
    "action":[{
    "id":"0",
    "image": "src=fsdf",
    "price" : "60$",
    "name" :"cs" 
    },
{
    "id":"1",
    "image": "src=fsdf",
    "price" : "6$",
    "name" :"whatever" 
}],

   "adventure":[{
        "id":"10",
        "image": "src=fsdf",
        "price" : "60$",
        "name" :"Cs" 
        }]
}
]

Answer 1

您可以将代码更改为如下内容：

import data from "../data.json";
//...

export default function App() {
  return (
    <div className="App">
      <div>
        {data[0].action.map((postData) => {
          return (
            <div key={postData.id}>
              <h1>{postData.name}</h1>
            </div>
          );
        })}
      </div>
    </div>
  );
}

data是一个具有两个属性的对象的数组：action和adventure，它们是数组。

正如prasanth所指出的，考虑到当前数据，您还可以删除最外层的数组，并使数据成为单个object。

然后您就可以在data.action上映射。

沙盒

Answer 2

如果要以json格式访问数据，则需要将您的json文件存储在公用文件夹中，然后使用useEffect钩子并在useEffect() Hook本身中获取数据。

这里是Codesandbox上的工作演示：

https://codesandbox.io/s/json-fanda-stydg

完整代码：

​

import React from "react";
import { useEffect, useState } from "react";
import "./styles.css";

function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch("./data/data.json")
      .then((response) => response.json())
      .then((json) => {
        console.log(json);
        setData(json);
      });
  });
  return (
    <div>
      {data.length > 0 &&
        data.map((postData) => {
          console.log(postData);
          return (
            <div key={data.id}>
              {postData.action.map((action) => {
                return <h1>{action.name}</h1>;
              })}

              <p>
                {postData.adventure.map((adventure) => {
                  return <h1>{adventure.name}</h1>;
                })}
              </p>
            </div>
          );
        })}
    </div>
  );
}

export default App;

​

JSON : You JSON非常好:)

[
  {
    "action": [
      {
        "id": "0",
        "image": "src=fsdf",
        "price": "60$",
        "name": "cs"
      },
      {
        "id": "1",
        "image": "src=fsdf",
        "price": "6$",
        "name": "whatever"
      }
    ],

    "adventure": [
      {
        "id": "10",
        "image": "src=fsdf",
        "price": "60$",
        "name": "Cs"
      }
    ]
  }
]