web-dev-qa-db-ja.com

プロップはコンポーネントで必須としてマークされていますが、その値は「未定義」です

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応答を送信するので、ここではかなり混乱しています。

追加のスクリーンショット： enter image description here

javascriptreactjsreact-routerreact-proptypes
7
Charles Duporge

SinglePageは、詳細で定義されているアイテムとは反対に、名前データを含む日付小道具を渡します

<Details item={date} />

日付の初期値も追加

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