时间戳

首页 > 解决方案 > TypeError：无法读取属性“标题”和未定义 React Hooks 道具的映射问题

javascript - TypeError：无法读取属性“标题”和未定义 React Hooks 道具的映射问题

问题描述

我有一个要获取的 Json 文件。我获取了数据，可以从 App.js 获取控制台中的数据。但是当我将数据作为道具传递给我的子组件时，它给了我一个空数组并且不显示项目。这里可能是什么错误？我的 json 数据和组件如下

App.js

import React, { useEffect, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import ProcessContainer from "./components/AdoptionProcess/ProcessContainer";


function App() {
  const [adoptionProcess, setAdoptionProcess] = useState([])

  async function fetchAsync () {
    let response = await fetch('./data.json');
    let data = await response.json();
    return data;
  }
  
  fetchAsync()
      .then(data => setAdoptionProcess(data))

      useEffect(() => {
        fetchAsync()
      },[])

  return (
    <div className="App">
    <ProcessContainer adoptionProcess={adoptionProcess}/>
    </div>
  );
}

export default App;

ProcessContainer.js

import React, { useEffect, useState } from "react";
import ProcessItems from "./ProcessItems";
import { Container, Row, Col } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';

const ProcessContainer = ({adoptionProcess}) => {
  console.log(adoptionProcess)  // -> gives and empty array here


  return (
    <Container>
      <Row className="adoptionContainer py-5">
        <Col sm={12}>
          <h1>{adoptionProcess && adoptionProcess.adoptionProcessTitle.title}</h1>
          <Row className="mt-5 items">
            {adoptionProcess && adoptionProcess.adoptionProcessItems.map((process) => (
              <ProcessItems 
                img={process.img}
                text={process.text}
                firstDescription={process.firstDescription}
                secondDescription={process.secondDescription}
              />
            ))}
          </Row>
        </Col>
      </Row>
    </Container>
  );
};

export default ProcessContainer;

ProcessItems.js

import React from "react";
import { Col } from "react-bootstrap";
import "./AdoptionProcess.css";

const ProcessItems = ({
  img,
  text,
  firstDescription,
  secondDescription
}) => {
  return (
    <Col lg={4} className="mb-5">
      <img src={img} alt="img" className="mb-3" />
      <p>{text}</p>
      <span>{firstDescription}</span> <br />
      <span>{secondDescription}</span>
    </Col>
  );
};

export default ProcessItems;

data.json

{
    "adoptionProcessItems": [
          {
            "id": 1,
            "img": "https://i.pinimg.com/736x/2e/23/d3/2e23d3827c8293c27cea544a8acbcd59.jpg",
            "text": "Find Your Pet",
            "firstDescription": "Lorem Ipsum Lorem Ipsum Lorem",
            "secondDescription": "Lorem Ipsum Lorem Ipsum Lorem"
          },
          {
            "id": 2,
            "img": "https://i.pinimg.com/736x/5f/80/85/5f80854fd1475958717a19e345695942.jpg",
            "text": "Find Your Pet",
            "firstDescription": "Lorem Ipsum Lorem Ipsum Lorem",
            "secondDescription": "Lorem Ipsum Lorem Ipsum Lorem"
          },
          {
            "id": 3,
            "img": "https://i.pinimg.com/736x/2e/23/d3/2e23d3827c8293c27cea544a8acbcd59.jpg",
            "text": "Find Your Pet",
            "firstDescription": "Lorem Ipsum Lorem Ipsum Lorem",
            "secondDescription": "Lorem Ipsum Lorem Ipsum Lorem"
          }
    ],
    "adoptionProcessTitle" : {
        "title" : "Pet Adoption Process"
      }
  }

视觉会是这样的 在此处输入图像描述

标签： javascriptreactjsreact-hooks

解决方案

如果你的fetchAsync函数不依赖于组件内部的任何东西，我会在组件外部定义它，这样就不会在每次渲染时创建新的引用。然后，确保在钩子内调用它。useEffect

编辑：您遇到的另一个问题是您试图在 JSON 对象存在之前访问其属性（即，在获取数据之前）。我建议不要为您的收养对象设置初始值，并在未定义时显示某种加载指示器。见下文：

async function fetchAsync () {
  let response = await fetch('./data.json');
  let data = await response.json();
  return data;
}

function App() {
  const [adoptionProcess, setAdoptionProcess] = useState()

  useEffect(() => {
    fetchAsync()
      .then(data => setAdoptionProcess(data))
  },[])

  if (!adoptionProcess) {
    return <div>Loading...</div>
  }

  return (
    <div className="App">
    <ProcessContainer adoptionProcess={adoptionProcess}/>
    </div>
  );
}

推荐阅读