از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
هنگام نوشتن برنامه های React، ممکن است با پیغام خطا مواجه شده باشید “اشیاء به عنوان فرزند واکنش معتبر نیستند.” این خطا یک خطای رایج است، مخصوصاً زمانی که تازه با کد React و JSX شروع کرده ایم. هنگامی که بخواهید مستقیماً یک شی را در JSX رندر کنید، به جای استفاده از فرزند React معتبر مانند رشته، عدد یا عنصر React، پرتاب می شود.
کد مانند این را در نظر بگیرید:
export default function Dashboard() {
const staff = (
{name: 'Billy', role: 'admin'},
{name: 'Sally', role: 'contributor'}
);
const hq = {
state: 'Nebraska',
country: 'USA',
};
return (
<>
<span>{staff}</span>
<div>
{hq}
</div>
</>
);
}
در مثال کد بالا، خطا به این دلیل رخ می دهد که ما سعی می کنیم کد را ارائه دهیم staff و hq اشیاء به طور مستقیم در داخل <span> و <div> عناصر. از آنجایی که اشیاء (از جمله آرایه ها) React Children معتبر نیستند، این خطای “اشیاء به عنوان فرزند React معتبر نیستند” را ایجاد می کند.
برای رفع این خطا، باید قبل از رندر کردن اشیا، آنها را به React Children معتبر تبدیل کنیم. در این صورت می توانیم از .map() روشی برای تکرار روی هر آیتم از یک آرایه و ارائه آن به عنوان عنصر React.
در اینجا مثالی از روش اصلاح کد بالا برای جلوگیری از خطای “اشیاء به عنوان فرزند واکنش معتبر نیستند” آورده شده است:
import React from 'react';
export default function App() {
const staff = (
{name: 'Billy', role: 'admin'},
{name: 'Sally', role: 'contributor'}
);
const hq = {
state: 'Nebraska',
country: 'USA',
};
return (
<div>
{staff.map(user => (
<div key={user.name}>
<p>{user.name}</p>
<p>{user.role}</p>
</div>
))}
<h1>HQ</h1>
<p>State: {hq.state}</p>
<p>Country: {hq.country}</p>
</div>
);
}
در کد بالا از عبارت استفاده می کنیم .map() روشی برای تکرار روی هر شی در لیست و ارائه آن به عنوان یک عنصر HTML. این به ما این امکان را می دهد که شیء را به درستی به عنوان HTML معتبر بسازیم. در غیر این صورت React نمی داند چگونه یک شی جاوا اسکریپت را رندر کند، به همین دلیل است که خطا می دهد.
برای یک شیء ساده مانند hq، می توانیم به هر ویژگی جداگانه دسترسی داشته باشیم و رندر HTML را برای هر عنصر مشخص کنیم.
نتیجه
خطای “اشیاء به عنوان فرزند واکنش معتبر نیستند” زمانی رخ می دهد که شما سعی می کنید یک شی را مستقیماً به یک جزء React به عنوان یک پایه یا فرزند ارسال کنید. برای رفع این خطا، باید آرایه را به عنوان مثال، با تکرار مقادیر آن و رندر کردن آنها به عنوان عناصر React، به یک فرزند React معتبر تبدیل کنید. این به React اجازه می‌دهد تا شی را به عنوان بخشی از خروجی کامپوننت ارائه کند، بدون اینکه خطایی ایجاد کند.
منتشر شده در 1403-01-06 03:54:04
