Как исправить «Объекты недопустимы в качестве дочерних элементов React»

Question

Ссылка Codesandbox .

Я получаю эту ошибку, когда пытаюсь использовать filter () для большого массива объектов (определяемых как FilterDharacters) и отображать только те, которые соответствуютидентификатор '6' на экране (только один делает).

Я console.log (FilterCharacters), и я ясно вижу в консоли, что он работает.Но по какой-то причине я получаю сообщение об ошибке «Объекты недопустимы как дочерние элементы React».

Код ниже взят из файла /components/content.js, приведенного выше по ссылке Codesandbox.

import React, { Component } from 'react';
import Intro from '../intro/intro';

class Content extends Component {
  render() {
    // Grab the 'characters' object from App.js, and assign it to 'this.props'
    const { characters } = this.props;

    // Filter the chracters and return only whose 'id' belongs to that of '6'
    const filteredCharacters = characters.filter(characters => {
      if (characters.id === 6) {
        return (
          <div className="characters" key={characters.id}>
            <p>Name: {characters.Name}</p>
            <p>ID: {characters.id}</p>
            <p>Job: {characters.Job}</p>
            <p>Age: {characters.Age}</p>
            <p>Weapon: {characters.Weapon}</p>
            <p>Height: {characters.Height}</p>
            <p>Birthdate: {characters.Birthdate}</p>
            <p>Birthplace: {characters.Birthplace}</p>
            <p>Bloodtype: {characters.Bloodtype}</p>
            <p>Description: {characters.Description}</p>
          </div>
        )
      }
    });

    // Check to see if it logs properly (it does)
    console.log(filteredCharacters);

    // When trying to render this to the screen below, it doesn't work

    return (
      <div>
        {filteredCharacters}
      </div>
    )
  }
}

export default Content;

Answer 1

Добавляя к ответу @ Tholle, вы можете объединить эти операции в одну с reduce

const filteredCharacters = characters
  .reduce((acc, character)  => {

    if (character.id !== 6) return acc;

    acc.push(<div className="characters" key={character.id}>
      <p>Name: {character.Name}</p>
      <p>ID: {character.id}</p>
      <p>Job: {character.Job}</p>
      <p>Age: {character.Age}</p>
      <p>Weapon: {character.Weapon}</p>
      <p>Height: {character.Height}</p>
      <p>Birthdate: {character.Birthdate}</p>
      <p>Birthplace: {character.Birthplace}</p>
      <p>Bloodtype: {character.Bloodtype}</p>
      <p>Description: {character.Description}</p>
    </div>);

    return acc;
  }, []);

Answer 2

В настоящее время вы используете один простой объект, чтобы вести себя как узел в структуре HTML компонента, который вы пишете.В таких случаях рекомендуется использовать реакцию в качестве одного из лучших, а затем сам вызывать его как компонент реакции.

Ниже приведен код, в котором теперь есть отдельный компонент, который можно вызывать по необходимости:

import React, { Component } from 'react';
import Intro from '../intro/intro';

const FilteredCharcters = characters => {
  characters.filter(character => {
   if (character.id === 6) {
     return (
       <div className="characters" key={character.id}>
         <p>Name: {character.Name}</p>
         <p>ID: {character.id}</p>
         <p>Job: {character.Job}</p>
         <p>Age: {character.Age}</p>
         <p>Weapon: {character.Weapon}</p>
         <p>Height: {character.Height}</p>
         <p>Birthdate: {character.Birthdate}</p>
         <p>Birthplace: {character.Birthplace}</p>
         <p>Bloodtype: {character.Bloodtype}</p>
         <p>Description: {character.Description}</p>
       </div>
     )
   }
 });

class Content extends Component {

  render() {
  const { characters } = this.props;
    return (
      <div>
        <FilteredCharacters characters={characters} />
      </div>
    )
  }
}

export default Content;

Answer 3

filter создаст только новый массив со всеми элементами, которые вернули истинное значение из функции.

Вместо этого сначала можно использовать filter, чтобы получить соответствующие символы, а затем использовать map в новом массиве, чтобы получить JSX, который вы хотите визуализировать.

const filteredCharacters = characters
  .filter(character => character.id === 6)
  .map(character => (
    <div className="characters" key={character.id}>
      <p>Name: {character.Name}</p>
      <p>ID: {character.id}</p>
      <p>Job: {character.Job}</p>
      <p>Age: {character.Age}</p>
      <p>Weapon: {character.Weapon}</p>
      <p>Height: {character.Height}</p>
      <p>Birthdate: {character.Birthdate}</p>
      <p>Birthplace: {character.Birthplace}</p>
      <p>Bloodtype: {character.Bloodtype}</p>
      <p>Description: {character.Description}</p>
    </div>
  ));