reactjs - چگونه کلید را به کامپوننت ریاکت پاس دهیم

میدانم این یک سوال بسیار ساده است و حتی مبتدیها هم میتوانند این کار را انجام دهند. اما به نوعی من با این خطا مواجه میشوم:

index.js:1 هشدار: هر فرزند در یک لیست باید یک ویژگی «key» منحصر به فرد داشته باشد.

متد render در FilterProducts را بررسی کنید.

در اینجا کد من است

const filterList = filterBy.map((f, i) => {
    const key = Object.keys(f);
    return (
      <div key={i} className="filter">
        <h4 className="filter__header">{key}</h4>
        {f[key].map((val) => {
          return (
            <CheckBoxInput
              changeVal={(e) => changeValHandler(e, key)}
              value={val.toLowerCase()}
              label={val}
            />
          );
        })}
      </div>
    );
  });

من در حال رندر کردن ۲ لیست هستم، کلید مربوط به لیست اول را فراهم کردم و در مورد لیست دوم نمیدانم چگونه کلید را منتقل کنم. این یک کامپوننت است و اگر کلید را به آن کامپوننت منتقل کنم، خطا میدهد که نمیتوان کلید را به عنوان prop ارسال کرد. لطفاً اینجا به من کمک کنید.

پاسخ شماره ۱

من فکر میکنم کد شما در این خط اشتباه است:

{f[key].map((val) => {

شما قبلاً کلیدهای مربوط به f را اینجا بازیابی کردهاید:

 const key = Object.keys(f);

پس کد شما در واقع باید به این شکل باشد:

const filterList = filterBy.map((f, i) => {
    const keys = Object.keys(f);
    return (
      <div key={i} className="filter">
        <h4 className="filter__header">{keys}</h4>
        {keys.map((val) => {
          return (
            <CheckBoxInput
              key={val} // then just use the f property key as the key (if unique)
              changeVal={(e) => changeValHandler(e, key)}
              value={val.toLowerCase()}
              label={val}
            />
          );
        })}
      </div>
    );
  });

سپس از کلید ویژگی f به عنوان کلید (اگر منحصر به فرد باشد) برای حلقه دوم مؤلفهها استفاده کنید.

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

<h4 className="filter__header">{keys}</h4>

اما همانطور که تا کنون کدنویسی شده است، این یک آرایه از کلیدها را نمایش میدهد.

پاسخ شماره ۲

شما در واقع درست انجامش دادید. اما در کد شما دو حلقه وجود دارد، هر حلقه باید عنصر حلقهای را با یک ویژگی key برچسبگذاری کند. تا زمانی که کلید برای آن حلقه یکتا باشد، مشکلی ندارد.

  <CheckBoxInput key={...} />