javascript - 来自一个函数的 React Child 错误正在引用另一个函数

Question

这是我所有的代码:

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 函数中获取的对象。

在我检查两个加载 Hook 之前，console.logs 完美地记录了数据。换句话说，useEffect 中的函数就最终产品而言完成了它们的工作。

这里有很多我不明白的地方。所谓的“React child”是什么？当我四处寻找解决方案时，它似乎出现在渲染函数中，但我的错误只是指向 setLoading Hook 部分。为什么我会收到一个错误，似乎是在引用另一个函数中发生的事情，但错误是在另一个函数中发生的？

编辑: 直接来自 postman :

数据=

{
    "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\"}]"
}

数据2 =

{
    "categoryname": "{\"category_owner\": 1, \"id\": 5, \"category\": \"scar tissue\"}"
}

Answer 1

所以因为 note 是一个对象，你不能把它当作一个字符串来使用，除非你用 JSON.stringify(note) 转换它来理解这个问题。但实际上，如果您只想要 object 中的 joke，您可以使用 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>
         );
  })}