Prop 在组件中被标记为 required，但其值为 `undefined`

Question

single.js :

import React, { Component } from 'react';
import Details from '../components/details'
import { ProgressBar } from 'react-materialize';
import { Route, Link } from 'react-router-dom';

const Test = () => (
  <div> RENDER PAGE 1</div>
)

class SinglePage extends Component {

  constructor(props) {
    super(props);

    this.state = {
      data: null,
    }
  }

    componentDidMount() {
        fetch('http://localhost:1337/1')
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          data: json,
        });
      });
    }

  render() {

    const { data } = this.state;

    return (

      <div>

        <h2> SinglePage </h2>

        {!data ? (
          <ProgressBar />
        ) : (
          <div>
            <Details data={data} />
          </div>
        )}
      </div>
    );
  }

}

export default SinglePage;

details.js :

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Details extends Component {

  static propTypes = {
    item: PropTypes.shape({
      date: PropTypes.string.isRequired,
    }).isRequired,
  }


    render() {
        const { item } = this.props;

        return (
            <div>
                <p> {item.date} </p>
            </div>
        )
    }
}

export default Details;

在控制台中，我收到一个错误：警告：道具类型失败：道具 item 在 Details 中被标记为必需，但其值为 undefined。

从这里我虽然我的 json 没有被抓到，但是我有一个在 http://localhost:1337/ , get datas and display them correctly, and going to http://localhost:1337/1 上获取的其他组件向我发送 json 响应，所以我在这里很困惑。

附加截图：

Answer 1

SinglePage 正在传递带有名称数据的日期道具，与详细信息中定义的项目相反

<Details item={date} />

同时为日期添加初始值

constructor(props) {
    super(props);
    this.state = {
        date: { date: null },
    }
}

Prop 在组件中被标记为 required，但其值为 `undefined`

Prop is marked as required in component, but its value is `undefined`

javascript

reactjs

react-router

react-proptypes