Почему PropTypes не удалось с Значение не определено - PullRequest
0 голосов
/ 05 февраля 2020

Я не могу понять, почему прототипы в моем функциональном компоненте в React терпят неудачу с этим:

`index.js:1 Warning: Failed prop type: The prop `profiles` is marked as required in `Home`, but its value is `undefined`.` 

Приложение работает нормально, и профили определены, и я использую React-redux с перехватчиками и, возможно, что вызывая проблему, потому что я не знаю, что делать, чтобы заставить работать PropTypes

Мой дом, где это происходит:

import React, { useEffect, useState } from "react";
import { Row, Col, Jumbotron, Container, Image } from "react-bootstrap";
import { ProfileMiddleware } from "../Store/Middleware";
import { PropTypes } from "prop-types";
import { useDispatch, useSelector } from "react-redux";
import { USERNAME } from "../Services/constAPI";
import Experiences from "../Components/Experiences/Experiences";
import { Spinner } from "../Components/Spinner/Spinner.js";

const Home = () => {
  const dispatch = useDispatch();
  const { profiles, displaySpinner } = useSelector(state => ({
    profiles: state.ProfileReducer.profiles,
    displaySpinner: state.ProfileReducer.displaySpinner
  }));

  useEffect(() => {
    dispatch(ProfileMiddleware.getOneProfile(USERNAME));
  }, [dispatch]);

  return !profiles.object ? (
    <>

      <Jumbotron>
        <Container>
          <Row>
            <Col md={6}>
              <Image src={profiles.imageUrl} alt="profile" roundedCircle />
            </Col>
            <Col md={6}>
              <h1>{profiles.firstname + " " + profiles.surname}</h1>
              <h4>{profiles.title}</h4>
              <h5>{profiles.area}</h5>
              <p>{profiles.email}</p>
              <p>{profiles.bio}</p>
            </Col>
          </Row>
          <Spinner displaySpinner={displaySpinner} />
        </Container>
      </Jumbotron>
      <Experiences />
    </>
  ) : (
    <h3 className="red-text mt-5">The profile is not available</h3>
  );
};

Home.propTypes = {
  profiles: PropTypes.object.isRequired
};

export default Home;

Редуктор, поскольку я использую Redux

import { ProfileActions } from "../Actions";

function ProfileReducer(
  state = {
    profiles: {},
    displaySpinner: false
  },
  action
) {
  console.log("data in action", action.data);
  console.log("Action type", action.type);

  switch (action.type) {
    case ProfileActions.GET_ONE_PROFILE:
      return {
        ...state,
        displaySpinner: true
      };
    case ProfileActions.GET_ONE_PROFILE_SUCCESS:
      return {
        ...state,
        profiles: action.data,
        displaySpinner: false
      };
    default:
      return state;
  }
}

export default ProfileReducer;

Я могу показать еще, если необходимо, но приложение работает, но PropTypes говорят, что профили не определены, что я не могу понять.

Ответы [ 3 ]

0 голосов
/ 05 февраля 2020

profiles - это не реквизит, передаваемый Home. Проптипы для компонента Home должны быть удалены.

0 голосов
/ 05 февраля 2020

На самом деле, вы не прошли props, обратите внимание на:

const Home = () => {

Вы должны написать const Home = props => { или уничтожить props в начале компонента вашей функции, как показано ниже:

const Home = ({ profiles }) => {

А затем используйте его в контексте выполнения компонента функции. Кроме того, вы можете поместить значение по умолчанию для вашего реквизита, как показано ниже:

const Home = ({ profiles = 'something' }) => {

'something' - это образец, он может быть чем угодно, или писать как показано ниже в конце объявления компонента вашей функции:

Home.defaultProps = {
  profiles: 'something'
};

Я надеюсь, что это поможет вам, но вы обязательно должны прочитать ReactJS документы немного больше.

0 голосов
/ 05 февраля 2020

Вы не передаете ни одного реквизита на Home. Если бы это было так, это выглядело бы примерно так:

const Home = (props) => {

Вместо этого вы получаете profiles из своего магазина редуксов. Так что просто измените

Home.propTypes = {
  profiles: PropTypes.object.isRequired
};

на

Home.propTypes = {};
...