下面是我的所有代码：
import styles from './Add.module.scss';
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import {IonPage, IonGrid, IonCol, IonRow, IonCardSubtitle, IonCard} from '@ionic/react';
import { Link } from 'react-router-dom';
const CategoryPage = () => {
const {category} = useParams();
const [loading, setLoading] = useState(true);
const [loading2, setLoading2] = useState(true);
const [categoryinfo, setCategoryinfo] = useState('');
const [categoryname, setCategoryname] = useState('');
useEffect(() => {
const showjokes = ({category}) => {
try {
fetch(`https://fakeurl.herokuapp.com/categorypage/${category}/`, {
method: 'GET',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
},
})
.then(res => res.json())
.then(data => {
console.log('chisora', JSON.parse(data.jokes));
setLoading2(false);
const categoryjokes = JSON.parse(data.jokes);
console.log('categoryjokes', categoryjokes);
setCategoryinfo(categoryjokes);
console.log(JSON.parse(data.jokes), '<==== here is data');
getcatname({category});
});
} catch (error) {
console.log('update, error time!', error);
return false;
}
};
showjokes({category});
const getcatname = ({category}) => {
try {
fetch(`https://fakeurl.herokuapp.com/getcatname/${category}/`, {
method: 'GET',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
},
})
.then(res2 => res2.json())
.then(data2 => {
console.log('parker', JSON.parse(data2.categoryname));
const categorynombre = JSON.parse(data2.categoryname);
console.log('categorynombre', categorynombre.category);
setCategoryname(categorynombre.category);
setLoading(false);
//console.log(JSON.parse(data.categoryname), "<==== here is data")
});
} catch (error) {
console.log('update, error time!', error);
return false;
}
};
}, []);
console.log('checking loading', loading, loading2);
//console.log("the stuff",categoryinfo[0].joke_category)
const stuff = categoryinfo;
console.log('stuff', stuff);
console.log('categoryname', categoryname);
if (loading2 || loading) return <p>loading</p>;
return (
<IonPage>
<h1>{categoryname} jokes</h1>
<IonGrid className={styles.bottomContainer}>
<IonRow>
<IonCol size="12" className="ion-padding-start">
<IonCardSubtitle className={styles.heading}>
{categoryname} jokes
</IonCardSubtitle>
</IonCol>
</IonRow>
<div className={ styles.recentNotes }>
{ stuff.map((note, index) => {
return (
<IonRow key={ `note_${ index }` } className="animate__animated animate__faster" id={ `noteRow_${ note.id }` }>
<IonCol size="12">
<Link to={`/Update/${note.id}`}>
<h2>{note}</h2>
</Link>
</IonCol>
</IonRow>
);
})}
</div>
</IonGrid>
</IonPage>
);
};
export default CategoryPage;
如您所见，useEffect中有两个函数：一个用于获取笑话数据数组，另一个用于获得笑话所在类别的名称。
这是我的错误信息：
Error: Objects are not valid as a React child (found: object with keys {joke, joke_name, joke_owner, joke_category, id}). If you meant to render a collection of children, use an array instead.
它指向getcatname函数中的setLoading(false)。错误中引用的对象是指我从showjokes函数中获得的对象。
在我检查两个加载挂钩之前的console.log完美地记录了数据。换句话说，就最终产品而言，useEffect中的功能完成了它们的工作。
这里有很多我不明白的地方。什么是"；React child"；是指什么？当我四处寻找解决方案时，它似乎出现在渲染函数中，但我的错误只是指向setLoading钩子部分。为什么我收到一个错误，似乎是引用了另一个函数中正在发生的事情，但错误在另一个功能中？
编辑：直接来自邮递员：
data=
{
"jokes": "[{"joke_name": "scar lengthening", "joke_owner": 1, "id": 5, "joke_category": 5, "joke": "eventually scar tissue lengthens when they get tired of being pulled"}, {"joke_name": "bummer", "joke_owner": 1, "id": 45, "joke_category": 5, "joke": "Scar Tissue is a bummer"}]"
}
data2=
{
"categoryname": "{"category_owner": 1, "id": 5, "category": "scar tissue"}"
}
因为note是一个对象，所以不能将其用作字符串，除非用JSON.stringify(note)对其进行转换以理解问题。但实际上，如果你只想把joke放在object里面，你可以用note.joke来访问它
像这样：
{stuff.map((note, index) => {
return (
<IonRow key={`note_${ index }`} className="animate__animated animate__faster" id={ `noteRow_${ note.id }` }>
<IonCol size="12">
<Link to={`/Update/${note.id}`}>
<h2>{note.joke}</h2>
</Link>
</IonCol>
</IonRow>
);
})}
啊，我现在看到错误了：(。你在地图功能中有一个错误：
stuff.map((note, index)....
这里的索引并不是您所期望的列表的索引，而是列表内容的另一个元素。这是一个您正在完整渲染的对象。这就是您看到有关渲染对象的错误的原因。
你的map函数应该只需要1个论点。然后，您可以获得该元素的索引，如下所示：
stuff.map((note) => {
const index = stuff.indexOf(note)
})
在组件的JSX:的这一部分中
stuff.map((note, index) => {
//...
})
您在<Link>中嵌套了一个<h2>:
<h2>{note}</h2>
这就是问题的根源。这里的note是API响应的data.jokes中的数组中的对象之一。
在将其用作<h2>中的内容之前，您需要将其转换为string。如果你只想开玩笑，你可以使用
<h2>{note.joke}</h2>
或者你可以用笑话的名字：
<h2>{note.joke_name}</h2>
等等。
我希望您导入IonPage、IonGrid、IonRow、IonCol、IonCard