reactjs - state-ის დაშლა useState-ში react-ში და typescript-ში

არის რაიმე გზა იმისთვის, რომ დესტრუქჩერირება მოხდეს მიმდინარე მდგომარეობაზე, რომელსაც სპეციფიურ ფორმა აქვს? მე მაქვს მიმდინარე მდგომარეობა personJob-ში, მაგრამ მსურს შემეძლოს მითითება, რომელ ობჯექტს ჩავხედო (როდესაც ვაწკაპუნებ ღილაკზე, რომელიც გაჭრის იმ კონკრეტულ ობჯექტს და გამოაჩენს მხოლოდ იმ მონაცემებს).

მიღებ შეცდომას TypeScript-ში const {company, dates, duties, title}=personJob[value];, როცა ვცდილობ დავჭრა იმ ინდექსით

შეცდომა არის:

Cannot destructure property 'company' of 'personJob[value]' as it is undefined.

კომპონენტი :

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const url = 'https://course-api.com/react-tabs-project';

interface IPerson {
    id: string;
    company: string;
    dates: string;
    duties: string[];
    title: string;
}

function App() {
    const [personJob, setPersonJob] = useState<IPerson[]>([]);
    const [value, setValue] = useState<number>(0);

    const fetchData = async () => {
        const response = await axios(url);
        setPersonJob(response.data);
    };

    useEffect(() => {
        fetchData();
    }, []);

    const { company, dates, duties, title, id } = personJob[value];

    return (
        <main>
            <h1>Jobs</h1>
            {personJob.map((job, index) => {
                return (
                    <button key={job.id} onClick={() => setValue(index)}>
                        {job.company}
                    </button>
                );
            })}
            <section>
                <article className="border-2 px-5 py-5">
                    <div key={id}>
                        <h2>{title}</h2>
                        <h3>{company}</h3>
                        <p>{dates}</p>
                        {duties.map((duty) => {
                            return <div>*** {duty}</div>;
                        })}
                        <button type="button">More Info</button>
                    </div>
                </article>
            </section>
        </main>
    );
}

export default App;

პასუხი #1

პრობლემა

სიმბოლურ გამოშვებაზე personJob კვლავ ცარიელი მასივია და personJob[0] გაურკვეველია, ამიტომ მისიაგან მნიშვნელობები ვერ გამოიტანება.

მხარდაჭერა

სუროგატი ობიექტი მიაწოდეთ დესტრუქტურირებისთვის, personJob[value] || {}.
შეასრულეთ პირობითად section, თუ personJob[value] ჭეშმარიტია და არსებობს.

კოდი :

function App() {
  const [personJob, setPersonJob] = useState<IPerson[]>([]);
  const [value, setValue] = useState<number>(0);

  const fetchData = async () => {
    const response = await axios(url);
    setPersonJob(response.data);
  };

  useEffect(() => {
    fetchData();
  }, []);

  const { company, dates, duties, title, id } = personJob[value] || {}; // <-- fallback for destructuring

  return (
    <main>
      <h1>Jobs</h1>
      {personJob.map((job, index) => {
        return (
          <button key={job.id} onClick={() => setValue(index)}>
            {job.company}
          </button>
        );
      })}
      {personJob[value] && <section> // <-- conditionally render section if data available
        <article className="border-2 px-5 py-5">
          <div key={id}>
            <h2>{title}</h2>
            <h3>{company}</h3>
            <p>{dates}</p>
            {duties.map((duty) => {
              return <div>*** {duty}</div>;
            })}
            <button type="button">More Info</button>
          </div>
        </article>
      </section>}
    </main>
  );
}

reactjs - state-ის დაშლა useState-ში react-ში და typescript-ში

პასუხი #1

პრობლემა

მხარდაჭერა

დემო