销毁道具时无法读取未定义的属性“地图”

Question

我有一个本地 json 文件作为我的 React 应用程序的一部分。 其结构如下：

[
{
  "id": 1,
  "company": "Photosnap",
  "logo": "./images/photosnap.svg",
  "new": true,
  "featured": true,
  "position": "Senior Frontend Developer",
  "role": "Frontend",
  "level": "Senior",
  "postedAt": "1d ago",
  "contract": "Full Time",
  "location": "USA Only",
  "languages": ["HTML", "CSS", "JavaScript"]
},
{
  "id": 2,
  "company": "Manage",
  "logo": "./images/manage.svg",
  "new": true,
  "featured": true,
  "position": "Fullstack Developer",
  "role": "Fullstack",
  "level": "Midweight",
  "postedAt": "1d ago",
  "contract": "Part Time",
  "location": "Remote",
  "languages": ["Python"],
  "tools": ["React"]
},

作为我的 React 应用程序的一部分，我有一个工作列表组件和一个工作卡组件。 这个想法是卡片将像这样呈现 所以我想做的是渲染卡片右侧的按钮。 工作卡代码如下：

import React from 'react';
import CustomButton from '../../custom-button/custom.button.component';
import './job-card.styles.css';

const JobCard = ({company, position, postedAt, contract, location, logo, featured, new:    newJob, languages}) => (

<div className="container">
  <div className='card'>
    <div className='companyName'>
        <img src={logo} alt="logo" width="100" height="100"></img>
    </div>
    <div className='content'>
      <div className='newFeatured'>
        <h2>{company}</h2>
        { newJob ? <button className='myButton'>New!</button> : null }
        {featured ? <button className='myDarkButton'>Featured</button> : null }
        </div>
        <h1>{position}</h1>
        <div className='details'>
            <h3>{postedAt} &#183;</h3>
            <h3>{contract} &#183;</h3>
            <h3>{location}</h3>
        </div>
        {languages.map((language) =>
        <CustomButton>{language}</CustomButton>
        )}
       </div>
    </div>
 </div>
 )

export default JobCard;

我的工作列表组件代码是这样的：

import React from 'react';
import './job-listing.styles.css';
import JobCard from '../job-card/job-card.component.jsx/job-card.component';
import { Component } from 'react';


class JobListing extends Component {
constructor() {
    super();
    this.state = {
        jobs: []
    }
  };

    componentDidMount() {
    fetch('/data.json')
    .then(response => response.json())
    .then(data => this.setState({jobs: data}))

    }
    render() {
    return (
        <div>
            {this.state.jobs.map(({id,...otherJobProps}) =>(
            <JobCard key={id} {...otherJobProps} />
            ))}
        </div>

        )
      }
    }

   export default JobListing;

我得到的错误与卡片组件中的语言道具有关。 因为它是一个数组，所以我试图对其进行解构但没有成功。 任何帮助，将不胜感激。

Answer 1

假设它是您所说的map ，问题是您至少有一个没有languages属性的 object - 例如，您收到的数据有时会将其关闭。 您的示例 JSON 中的两个对象具有它，但显然，并非所有对象都具有。

你如何处理它取决于你。

1. 您可以在解构时通过在参数列表中的解构languages之后添加= []来默认它。

    const JobCard = ({company, /*...*/, languages = []) => (

2. 当languages是虚假的时，您可以避免在 JSX 中调用map ：

    {languages && languages.map((language) => <CustomButton>{language}</CustomButton> )}

---

旁注：您需要在map回调中创建的那些CustomButton的key属性。