将 JSON 数据添加到 React

Posted

技术标签:

【中文标题】将 JSON 数据添加到 React【英文标题】:Adding JSON data to React 【发布时间】:2021-02-19 16:03:26 【问题描述】:

我已经能够从我使用 MongoDB 和 Express 构建的 API 中提取数据,但是在将嵌套数据渲染到我的 React 组件时遇到了问题。

例如,如果我输入 <p>restaurant.cuisine</p>,我可以检索 Burgers, American,但如果我尝试访问 restaurant.status.delivery,我会收到一条错误消息:

无法读取未定义的属性“delivery”。

但是如果我console.log(restaurant.status 我可以看到对象吗?我尝试使用 Object.values 将对象转换为数组,但这也不起作用。

如果我尝试访问 restaurant.imagesrestaurant.geometry 中的嵌套对象,也会发生同样的事情。

这是我的 React 钩子的副本:

import  useReducer, useEffect  from 'react';
import axios from 'axios';

const ACTIONS = 
  MAKE_REQUEST: 'make-request',
  GET_DATA: 'get-data',
  ERROR: 'error',
;

function reducer(state, action) 
  switch (action.type) 
    case ACTIONS.MAKE_REQUEST:
      return  loading: true, restaurant: [] ;
    case ACTIONS.GET_DATA:
      return 
        ...state,
        loading: false,
        restaurant: action.payload.restaurant,
      ;
    case ACTIONS.ERROR:
      return 
        ...state,
        loading: false,
        error: action.payload.error,
        restaurant: [],
      ;
    default:
      return state;
  


export default function useFetchSingleRestaurant( id ) 
  const [state, dispatch] = useReducer(reducer, 
    restaurant: [],
    loading: true,
  );

  useEffect(() => 
    dispatch( type: ACTIONS.MAKE_REQUEST );
    axios
      .get('http://localhost:4444/restaurants/' + id)
      .then((res) => 
        dispatch(
          type: ACTIONS.GET_DATA,
          payload:  restaurant: res.data.restaurant ,
        );
      )
      .catch((e) => 
        dispatch(
          type: ACTIONS.ERROR,
          payload:  error: e ,
        );
      );
  , [id]);

  return state;

我在我的 SingleRestaurant 组件中访问它:

function SingleRestaurant( match ) 
  const  restaurant  = useFetchSingleRestaurant( id: match.params.id );

  return ( 
    <p>restaurant.status.delivery</p>
  ) 

这也是我的后端设置:

showRestaurant = async (req, res) => 
  const restaurant = await Restaurant.findById(req.params.id)
    .populate( path: 'reviews', populate:  path: 'author'  )
    .populate('author');
  if (!restaurant) 
    req.flash('error', 'Restaurant not found.');
    return res.redirect('/restaurants');
  
  res.send( restaurant );
;

【问题讨论】:

【参考方案1】:

在您的服务器请求返回 restaurant 之前,它将被设置为您设置的默认 []

空数组没有status 的属性,因此出现错误。

如果您将默认值更改为 null:

const [state, dispatch] = useReducer(reducer, 
    restaurant: null,
    loading: true,
  );

然后检查一个值:

function SingleRestaurant( match ) 
  const  restaurant  = useFetchSingleRestaurant( id: match.params.id );
  if (!restaurant) return 'Loading'

  return ( 
    <p>restaurant.status.delivery</p>
  ) 

你也可以从你的钩子传回加载状态,然后检查它。

【讨论】:

以上是关于将 JSON 数据添加到 React的主要内容,如果未能解决你的问题,请参考以下文章

VS Code 中的 React Native:将 iOS 设备的配置添加到 launch.json

在 react js 中添加指向 json 对象的链接

将 Jest 覆盖阈值添加到 create-react-app 项目

将打字稿添加到 create-react-app 时出现 tslint 问题

将 plugin-proposal-class-properties 添加到 create-react-app 项目

将动态生成的复选框添加到 react-table 并捕获行数据