reactjs - 在react和typescript中解构useState中的状态

Question

有没有办法解构具有指定形状的当前状态？我在 personJob 中有一个当前状态，但我希望能够指定要查看的对象(当我单击一个按钮时，该按钮将切片该特定对象并仅呈现该数据)。

当我尝试按该索引进行切片时，我在 TypeScript const {company,dates,duty,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;

Answer 1

问题

在初始渲染时，personJob 仍然是一个空数组，并且 personJob[0] 未定义，因此无法从中解构值。

解决方案

1. 提供一个后备对象来解构，personJob[value] || {}。
2. 如果 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>
  );
}

演示