时间戳

首页 > 解决方案 > React 无法从数组中读取对象的属性

arrays - React 无法从数组中读取对象的属性

问题描述

import React, {useState, useEffect} from 'react';
import HomeNavbar from './HomeNavbar.js'
import axios from 'axios';
import './AllBeers.css'

function SingleBeer(props) {

    let id = props.match.params._id
    const [beers, setBeers] = useState(['']);
    const [selectedBeer, setSelectedBeer] = useState();

    useEffect(() => {
        axios.get('https://ih-beers-api2.herokuapp.com/beers')
            .then(res => {
                setBeers(res.data);
            });
    },[]);

    setSelectedBeer(beers.find(x => x._id === id));

    return (
        <div>
            <HomeNavbar />
            <img id="beerPictures" src={selectedBeer.image_url} alt="A Beer Pic"></img>
            <h3>{selectedBeer.name}</h3>
            <h3>{selectedBeer.tagline}</h3>
            <h3>{selectedBeer.first_brewed}</h3>
            <h3>{selectedBeer.attenuation_level}</h3>
            <h3>{selectedBeer.description}</h3>
            <h3>{selectedBeer.contributed_by}</h3>
        </div>
    )
}

export default SingleBeer;

selectedBeer console.log's 作为一个对象，但它不能访问任何属性，所以 selectedBeer.name 等都不起作用。有人知道为什么吗？

标签： arraysreactjsobjectreact-router

解决方案

selectedBeer在第一次渲染时未定义const [selectedBeer, setSelectedBeer] = useState();。所以你会在第一次渲染时得到一个错误。一旦你将它设置为一个对象，那么这些selectedBeer.name ...将起作用。您可以通过执行以下操作快速修复它const [selectedBeer, setSelectedBeer] = useState({});：这样你就不会在第一次渲染时得到那个错误。

这也const [beers, setBeers] = useState(['']);应该是const [beers, setBeers] = useState([]);制作一个空数组。

推荐阅读