销毁道具时无法读取未定义的属性 'map'

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 属性 — 例如，您收到的数据有时会关闭。你样本中的两个对象 JSON 有它，但显然不是所有的都有。

如何处理取决于您。

你可以在解构时默认它，通过在参数列表的解构中的languages之后添加= []。
```
const JobCard = ({company, /*...*/, languages = []) => (
```

当 languages 为假时，您可以避免在 JSX 中调用 map：

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

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

销毁道具时无法读取未定义的属性 'map'

Cannot read property 'map' of undefined when destructing props

javascript

arrays

destructuring

reactjs

销毁道具时无法读取未定义的 属性 'map'

Cannot read property 'map' of undefined when destructing props

javascript

arrays

destructuring

reactjs

销毁道具时无法读取未定义的属性 'map'