时间戳

首页 > 解决方案 > 错误：对象作为 React 子项无效。如果您打算渲染一组子项，请改用数组。从 JSON 获取数据

javascript - 错误：对象作为 React 子项无效。如果您打算渲染一组子项，请改用数组。从 JSON 获取数据

问题描述

伙计们！我正在使用 ReactJS 创建一个小型网站。由于我添加了以下代码，它开始显示错误：Objects are not valid as a React child。如果您打算渲染一组子项，请改用数组。

代码：

import { useState, useEffect } from 'react';
import { motion, useAnimation } from 'framer-motion';
import './css/App.min.css';
import config from './config';

function App() {
  return (
    <div className="myskills">
      <Skills skillType="coding" />
    </div>
  );
}

function Skills(props){
  const skillType = props.skillType;
  const result = config.skills.filter(skill => skill.cat == skillType);
  console.log(result);
  result.map((skill, index) => (
    <div className="singleSkill" key={index}>
      {skill.name} Level: {skill.level}
    </div>
  ));
  return (<div>{result}</div>);
}

配置文件

{
  "skills": [
    {
      "name": "HTML",
      "level": 5,
      "cat": "coding"
    },
    {
      "name": "CSS",
      "level": 5,
      "cat": "coding"
    },
    {
      "name": "PHP",
      "level": 4,
      "cat": "coding"
    }
  ]
}

有什么想法有什么问题吗？

标签： javascriptjsonreactjs

解决方案

您的组件中的 return 语句Skills基本上就是这样的：

return (config.skills.filter(skill => skill.cat == skillType));

因此“对象作为 React 子项无效”错误。

由于result.map不修改原始数组，因此更好的解决方案可能如下所示：

function Skills(props) {
  const skillType = props.skillType;
  const result = config.skills.filter(skill => skill.cat == skillType);
  return (
    <div>
      {result.map((skill, index) => (
        <div className="singleSkill" key={index}>
          {skill.name} Level: {skill.level}
        </div>
      ))}
    </div>
  );
}

推荐阅读