react.js 中的道具问题

Question

我是新来的反应。 我正在构建一个简单的联系人列表应用程序来显示联系人的姓名 email，我们将存储联系人的标语。 我们将使用它，它包含我们的联系人列表应用程序所需的数据的 JSON 转储。 我有 2 个文件 statushelper.js 和 shape.js

下面是 statushelper.js

import React, {Component} from 'react';
import Shapes from './Shapes';

class StatusHelper extends Component {
    constructor() {
        super();

        this.state = {
            contacts: []
        };
    }
    componentDidMount() {
        fetch('http://jsonplaceholder.typicode.com/users')
            .then(res => res.json())
            .then((data) => {
                this.setState({contacts: data})
            })
            .catch(console.log)
    }
    render () {
        return (
            <Shapes contacts={this.state.contacts} />
        );
    }
}

export default StatusHelper;

形状.js

import React from 'react'

const Shapes = ({ contacts }) => {
    return (
        <div style={{text_align: 'center'}}>
            <h1>Contact List</h1>
            {contacts.map((contact) => (
                <div className="card">
                    <div className="card-body">
                        <h5 className="card-title">{contact.name}</h5>
                        <h6 className="card-subtitle mb-2 text-muted">{contact.email}</h6>
                        <p className="card-text">{contact.company.catchPhrase}</p>
                    </div>
                </div>
            ))}
        </div>
    )
};

export default Shapes

当我运行 statushelper.js 文件时，我遇到了以下错误

'contacts' is missing in props validation                react/prop-types
 Missing "key" prop for element in iterator               react/jsx-key

有什么建议么？

Answer 1

你正在渲染一个元素数组，所以 React 需要一个 key prop。

将index添加到您的映射并将key={index}添加到您的 div“卡片”。 像那样：

const Shapes = ({ contacts }) => {
    return (
        <div style={{text_align: 'center'}}>
            <h1>Contact List</h1>
            {contacts.map((contact, index) => (
                <div className="card" key={index}>
                    <div className="card-body">
                        <h5 className="card-title">{contact.name}</h5>
                        <h6 className="card-subtitle mb-2 text-muted">{contact.email} 
                        </h6>
                        <p className="card-text">{contact.company.catchPhrase}</p>
                    </div>
                </div>
            ))}
        </div>
    )
};

Answer 2

这些不是错误，而只是警告。 修复这些警告。 请执行下列操作：

1）您缺少道具类型，这就是您遇到第一个错误的原因。

在shapes.js中执行此操作：

import PropTypes from 'prop-types';

// Component declaration

Shapes.propTypes = {
    contacts: React.PropTypes.arrayOf(React.PropTypes.shape({
      name: React.PropTypes.string,
      email: React.PropTypes.string,
      company: React.PropTypes.shape({
          catchPhrase: React.PropTypes.string
      })
   }))
};

2）您的map function 中缺少用于优化的键：只需更改

{contacts.map((contact) => (
                <div className="card">

至

{contacts.map((contact, index) => (
                <div className="card" key={index}>