Получаване на грешка: Обектите не са валидни като дете на React

Екранната снимка на елемент от масива issueList, който е обект. issueList Array

import React from 'react';

const IssueList = (props)=>{
    const issues = props.issueList.map((issue)=>{
        return (
            <div key={issue.id}>
                <span>
                    <p><strong>Issue Title: </strong>{issue.title}   </p>
                    <p>   <strong>Created By : </strong>{issue.user["login"]}</p>
                </span>   
                <p><strong>Assigned to: </strong>{issue.assignee}</p>
                <p><strong>Issue Description: </strong>{issue.body}</p>
            </div>
        )

    });

    return <div>{issues}</div>;
}

Опитвам се да изобразя div с малко информация от моя масив от обекти issueList. Горният код създава следната грешка:

Error: Objects are not valid as a React child (found: object with keys {login, id, node_id, avatar_url, gravatar_id, url, html_url, followers_url, following_url, gists_url, starred_url, subscriptions_url, organizations_url, repos_url, events_url, received_events_url, type, site_admin}). If you meant to render a collection of children, use an array instead.
    in p (at IssueList.js:12)
    in div (at IssueList.js:7)
    in div (at IssueList.js:19)

issueList е масив от обекти


reactjs node.js jsx react-component
person Abhishek Sharma    schedule 02.02.2020    source източник
comment
Една от вашите стойности е обект. Не можем да ви кажем кое, без да видим пример за един от вашите проблемни обекти, но трябва да получите достъп до вложено свойство някъде, като issue.body.description или issue.assignee.login   -  person Paul    schedule 03.02.2020
comment
Можете да видите проблема на вашата екранна снимка.. issue.assignee е обект   -  person azium    schedule 03.02.2020
comment
Благодаря, @azium..беше наистина разочарован и не го видя.   -  person Abhishek Sharma    schedule 03.02.2020

Отговори (1)


arrow_upward
-1
arrow_downward

Така че имате масив от issueList, който искате да изобразите като списък с компоненти (да кажем IssueList). Ако приемем, че вашият проблем е настроен по следния начин

issue = {
  id: "ID string",
  title: "Title",
  user: "User name",
  assignee: "Asignee name",
  body: "body string ..... "
}

Първо можете да настроите своя IssueList компонент, както следва

const IssueList = ({ issueList }) => (
  <div>
  {
    issueList.map((issue) => (
      <div key={issue.id}>
        <span>
           <p><strong>Issue Title: </strong>{issue.title}   </p>
           <p>   <strong>Created By : </strong>{issue.user}</p>
        </span>
        <p><strong>Assigned to: </strong>{issue.assignee}</p>
        <p><strong>Issue Description: </strong>{issue.body}</p>
      </div>
    )
  }
  </div>
)

Сега можете да използвате своя IssueList навсякъде.

person sudo97    schedule 02.02.2020
comment
Прочетете дефиницията на issue обект в моя отговор. Тъй като не сте предоставили никаква дефиниция на ключовете и съответните стойности на вашите issue обекти. Бях дефинирал прост issue. Имайте предвид, че всички стойности в моя issue са низове, а не обекти. - person sudo97; 03.02.2020
comment
Както @azium посочи. Вашият ключ assignee имаше обект като стойност, следователно ще трябва да получите достъп до конкретния ключ, който възнамерявате да използвате. - person sudo97; 03.02.2020