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

Posted 2023-02-19

【中文标题】来自一个函数的 React Child 错误正在引用另一个函数

【英文标题】：React Child error from one function is referencing another function

【发布时间】：2022-01-22 12:10:25

【问题描述】：

这是我所有的代码：

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.logs 完美地记录了数据。换句话说，就最终产品而言，useEffect 中的功能发挥了作用。

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

编辑： 直接来自邮递员：

数据 =

    "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\""

【问题讨论】：

我格式化了您的代码（使用Prettier），以便其他人更容易阅读。我必须在您的返回 JSX 中添加一些结束标记，以便解析器接受它。请检查最后的编辑（#3）以确保它是正确的。

@jsejcksn 对我来说看起来不错。我真的需要努力让我的代码看起来更正常！谢谢！

所以当你试图渲染一个对象时，React 会抱怨（它不知道怎么做）。看起来它正在尝试渲染的 Objet 是状态 categoryinfo。当您执行const stuff = categoryinfo 时，您将categoryinfo 转换为stuff，这些变量都不会出现在返回中。好像省略了一些代码？

看来note 不是字符串，而是object。您能否在您的问题中加入一个示例，说明 data 和 data2 的外观？

@JackMcKayFletcher Stuff = imgur.com/a/wQs7ayW

【参考方案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>
         );
  )

【讨论】：

成功了！在我的所有错误中似乎都指出了setLoading 的任何特殊原因？不管我把它放在哪里。它会指向它。

@filifunk 很高兴听到这个消息！对不起，我不知道最后一个问题的原因。干杯。

【参考方案2】：

在你组件的 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>

等等

【参考方案3】：

啊，我现在看到了这个错误 :)。您的地图功能存在错误：

stuff.map((note, index)....

这里的索引不是您期望的列表的索引 - 而是列表内容的另一个元素。这是您要完整渲染的对象。这就是您看到有关渲染对象的错误的原因。

您的地图功能应该只需要 1 个参数。然后，您可以像这样获取该元素的索引：

stuff.map((note) => 
   const index = stuff.indexOf(note)

)

【参考方案4】：

希望你导入了 IonPage、IonGrid、IonRow、IonCol、IonCard

【讨论】：

我确实导入了那些是的