时间戳

首页 > 解决方案 > 从 React 中的 JSON 本地文件中获取数据

json - 从 React 中的 JSON 本地文件中获取数据

问题描述

我需要一些帮助来获取本地文件中的一些数据，调用 data.json 到我的 React 组件。数据非常简单，但是当我尝试连接我的组件时，我在组件中拥有的所有信息都比我从数据文件中添加的信息少。

这是我的data.json：


 { "data": [
         { "id": "1",
            "name": "john"    
              },  
 ]}

...这是我的组件，我需要在其中获取数据，并且所有工作都比我想要连接的信息少，并且完全空白。这是我在第一时间传递信息以将信息发送到状态的功能。


    function RenderFoo({data, name}) {
        return (
            <div>{data.name}</div>
       )}
    export default class Example extends Component {
        constructor(props) {
            super(props);
            this.state = {
                data : [data]
            }}
        render() {
            const dataExample = this.state.data.map((element) => {
                return (
                    <div key={element.url}>
                        <RenderFoo data ={ element }/>
                    </div>
                )})
            return (
                <div>
                  <Card >
                        {dataExample}
                  </Card>
                </div>)

屏幕在我连接数据的组件部分显示为空白，但在组件的其他部分正常工作时没有任何错误。我认为获取信息的 sintaxis 是不正确的，任何理由不读取数据。如果我在函数中更改 data.name 会出错。我不知道我是否丢失了钥匙。

将所有数据移至主组件也不值得，因为之后我需要增加数据，我会增加数千行，创建一个完整的后端对于这种应用程序来说毫无意义

谢谢

标签： jsonreactjsfetch

解决方案

您的州有一个属性data，它是一个数组。该数组的每个元素都是一个具有属性的对象id-name也许url？

那么这里应该有什么道具：

    function RenderFoo({data, name}) {
        return (
            <div>{data.name}</div>
       )}

是否RenderFoo采用一个属性data，即整个数据对象？还是将数据的属性作为单独的道具？两者都可以，但感觉就像您将两者混合在一起。所以name从道具中删除。

<div key={element.url}>

数据中的所有元素都具有url属性吗？我只是问，因为你的样本只是显示name和id.

this.state = {
    data : [data]
}}

这在我看来也很可疑。您正在获取变量data并使其成为数组中的单个元素。我不确定您的data变量到底是什么样的，但我认为您可能希望将其设置为整个状态，this.state = data.

尝试这个：

import React, { Component } from "react";
import json from "./data";

function RenderFoo({ data }) {
  return <div>{data.name}</div>;
}

export default class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: json.data
    };
  }
  render() {
    return (
      <div>
        {this.state.data.map((element) => (
          <div key={element.id}>
            <RenderFoo data={element} />
          </div>
        ))}
      </div>
    );
  }
}

我删除了该<Card>组件，因为我不知道您从哪里导入它，但您可以轻松地将其添加回来。

推荐阅读