在 React 中從 JSON 本地文件中獲取數據

Question

我需要一些幫助來獲取本地文件中的一些數據，調用 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 會出錯。 我不知道我是不是丟了鑰匙。

將所有數據移動到主要組件也不值得，因為我需要在之后增加數據並且我將有數千行，並且創建一個完整的后端對於這種應用程序毫無意義

謝謝

Answer 1

您的州有一個屬性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>組件，因為我不知道您從何處導入它，但您可以輕松地將其添加回來。