Prop在组件中标记为必需，但其值为`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 /上获取，获取数据并正确显示它们，然后转到http：// localhost：1337/1向我发送一个json回应，所以我很困惑。

附加屏幕截图：

Answer 1

SinglePage 正在传递带有名称数据的日期属性，而不是在详细信息中定义的项目

<Details item={date} />

还添加日期的初始值

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