Prop est marqué comme requis dans le composant, mais sa valeur est `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;

Dans la console, j'obtiens une erreur: Avertissement: type de prop échoué: le prop item est marqué comme requis dans Details, mais sa valeur est undefined.

De là, je pensais que mon json n'était pas attrapé mais j'ai un autre composant qui va chercher sur http: // localhost: 1337 / , obtenir des données et les afficher correctement, et aller à http: // localhost: 1337/1 envoyez-moi une réponse json donc je suis assez confus ici.

Capture d'écran supplémentaire:

Answer 1

SinglePage transmet les accessoires de date avec les données de nom comme opposé à l'élément défini dans les détails

<Details item={date} />

Ajout d'une valeur d'initialisation pour la date

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