Question

我正在尝试验证从父组件获得的对象数组，但是在控制台上收到以下错误消息：

Warning: Failed prop type: The prop `messageList [0] .lastMessage` is marked as required in` MessageList`, but its value is `undefined`.
    in MessageList (at Sidebar / index.js: 135)
    in Sidebar (at App.js: 11)
    in App (at src / index.js: 5)

我不了解的是我所有的索引都是正确的，列表正确显示，并且没有属性变得不确定。

我在做什么错了？

主要组件：

import React, { Component } from "react";

// STYLES
import { ContainerMain, ContainerMessage, Header, UserAvatar } from "./styles";

// SUBCOMPONENT'S
import MessageList from "../MessageList";
import SearchMessage from "../SearchMessage";

class Sidebar extends Component {
  state = {
    testUser: [
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "THIAGO DE BONIS",
        message: {
          amountOfUnreadMessage: 100,
          lastMessageTime: "00:00",
          lastMessage: "Curabitur sit amet vestibulum quam."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "FELLIPE ESTEVES",
        message: {
          amountOfUnreadMessage: 20,
          lastMessageTime: "18:54",
          lastMessage:
            "Praesent sit amet justo vitae enim euismod convallis sit amet sit amet ligula."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 1",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "POSUERE PORTTITOR EQEQEQE",
        message: {
          amountOfUnreadMessage: 5,
          lastMessageTime: "13:20",
          lastMessage:
            "Curabitur sit amet vestibulum quam. Aliquam vel ornare orci, sed eleifend metus."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 22",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 2",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 3",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 4",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 5",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 6",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      }
    ]
  };

  render() {
    return (
      <ContainerMain>
        <Header>
          <div>
            <UserAvatar src="https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png" />
          </div>
          <SearchMessage />
        </Header>
        <ContainerMessage>
          <MessageList messageList={this.state.testUser} />
        </ContainerMessage>
      </ContainerMain>
    );
  }
}

export default Sidebar;

儿童组件：

import React from "react";
import PropTypes from "prop-types";

// STYLES
import {
  ContainerMain,
  ContainerUserMessage,
  ContainerInformation,
  UserAvatar,
  Username,
  LastMessage,
  LastMessageTime,
  AmountOfUnreadMessage
} from "./styles";

const MessageList = ({ messageList }) => {
  return messageList.map(props => (
    <ContainerMain key={props.name}>
      <UserAvatar src={props.avatar} />
      <ContainerUserMessage>
        <Username>{props.name}</Username>
        <LastMessage>{props.message.lastMessage}</LastMessage>
      </ContainerUserMessage>
      <ContainerInformation>
        <LastMessageTime>{props.message.lastMessageTime}</LastMessageTime>
        <AmountOfUnreadMessage>
          {props.message.amountOfUnreadMessage}
        </AmountOfUnreadMessage>
      </ContainerInformation>
    </ContainerMain>
  ));
};

MessageList.propTypes = {
  messageList: PropTypes.arrayOf(
    PropTypes.shape({
      lastMessage: PropTypes.string.isRequired,
      lastMessageTime: PropTypes.string.isRequired,
      amountOfUnreadMessage: PropTypes.number.isRequired
    }).isRequired
  ).isRequired
};

export default MessageList;

Answer 1

好像您的道具lastMessage中缺少一个等级， lastMessageTime和amountOfUnreadMessage是message的一部分，您可以在messageList上进行定义。

如何正确验证对象数组？

1 个答案: