تمرین چالش برنامه نویسی – سوال 1

سوال امروز:
یک برنامه React ایجاد کنید که لیستی از موارد را نشان می دهد و به کاربران امکان اضافه کردن موارد جدید را می دهد. اگر خالی باشد ، قسمت ورودی نباید ارسال شود ، موارد تکراری اضافه نمی شود و قسمت پس از ارسال پاک می شود.

راه حل
رویکرد من برای حل این مسئله این بود که ابتدا هر مرحله را که می خواهم هنگام نوشتن کد انجام دهم ، بنویسم

1. یک قسمت ورودی ایجاد کنید
2. یک دکمه اضافه کنید
3. دکمه باید تابعی داشته باشد که:

• محتوای ورودی را به لیست زیر اضافه می کند

• پس از اضافه کردن یک مورد ، قسمت ورودی را مجدداً تنظیم می کند

• بررسی می کند که آیا مورد اضافه شده قبلاً اضافه شده است.

توجه به این نکته حائز اهمیت است که این سؤال از یک بستر تست آنلاین که یک کد دیگ بخار تهیه کرده است به دست آمده است. بنابراین من این را برای شروع کار داشتم:

import { useState } from "react";
import "h8k-components";

import "./App.css";

function App() {
  const [items, setItems] = useState([]);
  const [input, setInput] = useState("");

  const handleAddItem = () => {
    // TODO: Add logic to add input to items list
  };

  return (
    <>
      
      
    >
  );
}

export default App;

در نتیجه ، مراحل 1 و 2 انجام شده است ، و تنها کاری که باید انجام دهم اجرای منطق بود. اولین قدم برای جلوگیری از ارسال یک میدان خالی بود

const trimmedInput = input.trim();

if(!trimmedInput) return;

از روش تریم برای جلوگیری از افزودن فضاهای غیر ضروری استفاده می شود. در این حالت ، اگر “خرید غذا” از قبل وجود داشته باشد ، اضافه کردن “خرید غذا” به عنوان کپی درمان می شود. سپس از عبارت “if” برای بررسی اینکه آیا قسمت ورودی پس از برداشتن فضاها خالی است ، استفاده شد.

مرحله بعدی بررسی این بود که آیا موردی که قبلاً اضافه شده ام وجود داشته باشد

if(items.includes(trimmedInput)){
     alert('This task has been added!');
     return;
  }

این روش شامل انجام یک جستجوی حساس به مورد برای تعیین اینکه آیا یک رشته در یک رشته دیگر وجود دارد ، استفاده می شود ، بازگشت درست یا نادرست است.

مرحله آخر اضافه کردن مورد در صورتی است که هر دو شرط زودتر برآورده شوند.

setItems([...items, trimmedInput]);
setInput('');

از SetItems برای به روزرسانی حالت قبلی (موارد) آرایه استفاده می شود. بنابراین ما قبل از استفاده از اپراتور پخش (… موارد) آنچه در آرایه بود اضافه می کنیم ، و سپس مورد جدید (trimmedInput) را اضافه می کنیم. از SetInput برای تنظیم مجدد حالت ورودی به یک رشته خالی ('') استفاده می شود.

راه حل نهایی

import { useState } from "react";
import "h8k-components";

import "./App.css";

function App() {
  const [items, setItems] = useState([]);
  const [input, setInput] = useState("");

  const handleAddItem = () => {
    // TODO: Add logic to add input to items list

    const trimmedInput = input.trim();

    if(!trimmedInput) return;

    if(items.includes(trimmedInput)){
            alert('This task has been added!');
            return;
        }
    setItems([...items, trimmedInput]);
    setInput('');
  };

  return (
    <>
      
      
    >
  );
}

export default App;

این همه مردمی است!