تابستون داره تموم میشه ها، فرصت‌ها محدودن کلی آفر جذاب در کمپین تابستون🔥👇
۰ ثانیه
۰ دقیقه
۰ ساعت
۲ Amin Ataei
Objects are not valid as a React child.
جامعه ری اکت ایجاد شده در ۲۵ آذر ۱۳۹۹

با سلام 

من در حین تماشای ویدئو کدهای استاد رو هم خودم میزدم که در آخر به این خطا برخورد کردم

Error: Objects are not valid as a React child (found: object with keys {post}). If you meant to render a collection of children, use an array instead.

مشکل از کجایه کاره ؟

ممنونم

import React, { useState } from "react";
import Loading from "./components/Loading";
import Toast from "./components/Toast";
import "react-toastify/dist/ReactToastify.css";
import { useEffect } from "react";
export default function App() {
  const [toast, setToast] = useState({ type: "info", message: "Information" });
  const [post, setpost] = useState("");
  const [postId, setpostId] = useState(1);
  const [load, setLoad] = useState(true);
  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
      .then((response) => response.json())
      .then((post) => {
        setpost(post.title);
        setLoad(false); // ???????
      });
  }, [postId]);
  function handleClick(e) {
    setpostId(e.target.value);
    setLoad(true);
  }
  return (
    <>
    <div>
    <div>
        <input value={postId} onChange={handleClick}></input>
      </div>
      <div>{load ? <Loading /> : { post }}</div>
      <Toast type={toast.type} message={toast.message} />
    </div>
    </>
  );
}

سلام

ارور شفاف گفته که post مشکل داره و نمیتونه اون رو رندر بکن! یه لاگ بگیر ببین که الان مقدار post چی هست

باید مقداری باشه که بتونه اون رو رندر بکن مثل یک کامپوننت، string و آرایه و ...

مجتبی سوری ۲۶ آذر ۱۳۹۹، ۰۹:۵۷

سلام مجدد

لاگ گرفتم و عینا یه آبجکت رو بدون ایراد برگردونده بود

منتهی شما داخل یک تگ h1 مقدار post رو قراردادین و من الان این کارو کردم و بدون اشکال اجرا میشه

قبلش این تگ رو قرار نداده بودم! 

در واقع این خط :

      <div>{load ? <Loading /> : <h1>{ post }</h1>}</div>

 

ممنون از وقتی که گذاشتید

 

 

Amin Ataei ۲۶ آذر ۱۳۹۹، ۱۱:۲۱