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 = []) => (
```

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

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

旁注：在key回调中创建的CustomButton上，您需要一个map属性。

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

1 个答案: