Javascript 如何修复'；对象作为React子对象无效'；

当我试图通过一个大的对象数组（定义为“filteredCharacters”）使用filter（）并仅将id为“6”的对象渲染到屏幕（只有一个）时，会出现此错误

我使用了console.log（filteredCharacters），我可以在控制台中清楚地看到它是有效的。但由于某些原因，我得到了一个“对象作为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;

import React，{Component}来自'React'；
从“../Intro/Intro”导入简介；
类内容扩展组件{
render（）{
//从App.js中抓取“characters”对象，并将其分配给“this.props”
const{characters}=this.props；
//筛选chracter并仅返回其“id”属于“6”的chracter
常量filteredCharacters=characters.filter（characters=>{
如果（characters.id==6）{
返回(
名称：{characters.Name}

ID:{characters.ID}

作业：{characters.Job}

年龄：{characters.Age}

武器：{字符。武器}

高度：{characters.Height}

生日：{characters.Birthdate}

出生地：{字符.出生地}

血型：{characters.Bloodtype}

描述：{characters.Description}

)
}
});
//检查日志记录是否正确（是否正确）
console.log（filteredCharacters）；
//当尝试将其渲染到下面的屏幕时，它不起作用
返回(
{filteredCharacters}
)
}
}
导出默认内容；

过滤器

只会创建一个新数组，其中包含从函数返回真实值的所有元素

您可以先使用

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>
  ));

const filteredCharacters=字符
.filter（character=>character.id==6）
.map（字符=>(
名称：{character.Name}

ID:{character.ID}

作业：{character.Job}

年龄：{character.Age}

武器：{字符.武器}

高度：{character.Height}

生日：{character.Birthdate}

出生地：{字符.出生地}

血型：{character.Bloodtype}

描述：{character.Description}

));

添加到@Tholle的答案中，您可以将这些操作与

reduce

const filteredCharacters=字符
.reduce（（acc，字符）=>{
如果（character.id！==6）返回acc；
加速推(
名称：{character.Name}

ID:{character.ID}

作业：{character.Job}

年龄：{character.Age}

武器：{字符.武器}

高度：{character.Height}

生日：{character.Birthdate}

出生地：{字符.出生地}

血型：{character.Bloodtype}

描述：{character.Description}

);
返回acc；
}, []);

当前，您正在使用一个简单对象作为正在编写的组件的HTML结构中的节点。在这种情况下使用react的最佳实践之一是创建并将其称为react组件本身

以下是您的代码，它现在有一个单独的组件，可以根据需要调用：

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;

import React，{Component}来自'React'；
从“../Intro/Intro”导入简介；
常量filteredcharacters=字符=>{
characters.filter（character=>{
如果（character.id==6）{
返回(
名称：{character.Name}

ID:{character.ID}

作业：{character.Job}

年龄：{character.Age}

武器：{字符.武器}

高度：{character.Height}

生日：{character.Birthdate}

出生地：{字符.出生地}

血型：{character.Bloodtype}

描述：{character.Description}

)
}
});
类内容扩展组件{
render（）{
const{characters}=this.props；
返回(
)
}
}
导出默认内容；

filter

接受一个谓词，该谓词返回一个布尔值，如果为true，则决定保留哪些元素；如果

filteredCharacters

数组的False成员是对象，则跳过这些元素，并且在呈现这些对象时会出现此错误