将钩子中的 setState 反应到对象数组的值 - TypeScript

在 TypeScript 中，使用钩子非常常见，因为它们可以用于管理组件中的状态，从而使整个应用程序变得更加动态和交互性。

钩子中使用的 setState 方法可以更新组件中的状态值，但是如果我们想要将这些值应用到组件之外的对象数组中，我们该怎么做呢？

下面是一些实用技巧，可以帮助您在 TypeScript 中将钩子中的 setState 反应到对象数组的值。

1. 在组件之外定义数组

通常情况下，我们会将组件中的状态存储在某个对象中，而不是存储在一个数组中。

但是，如果您希望将 setState 反应到一个对象数组中，则应该在组件之外定义该数组，并在组件中使用它。以下是一些示例代码：

interface Person {
  name: string;
  age: number;
}

const people: Person[] = [
  {
    name: "John",
    age: 30
  },
  {
    name: "Jane",
    age: 25
  }
];

function MyComponent(props: {}) {
  const [peopleData, setPeopleData] = useState<Person[]>(people);

  const handleClick = (index: number) => {
    const newPeopleData = [...peopleData];
    newPeopleData[index].age += 1;
    setPeopleData(newPeopleData);
  };

  return (
    <div>
      {peopleData.map((person, index) => (
        <div key={index}>
          {person.name} is {person.age} years old
          <button onClick={() => handleClick(index)}>Add year</button>
        </div>
      ))}
    </div>
  );
}

在这个例子中，我们在组件之外定义了一个名为“people”的对象数组，并在组件中使用了它。在 handleClick 函数中，我们通过创建 peopleData 的副本来更新数组中的 age 值，然后使用 setPeopleData 将这些更改应用于当前组件的状态。

2. 使用 useEffect 钩子

另一种方法是使用 useEffect 钩子来监听组件状态的更改并在其更改时更新对象数组。以下是如何实现这一点的示例代码：

interface Person {
  name: string;
  age: number;
}

const people: Person[] = [
  {
    name: "John",
    age: 30
  },
  {
    name: "Jane",
    age: 25
  }
];

function MyComponent(props: {}) {
  const [peopleData, setPeopleData] = useState<Person[]>(people);

  useEffect(() => {
    console.log("People data has changed:", peopleData);
  }, [peopleData]);

  const handleClick = (index: number) => {
    const newPeopleData = [...peopleData];
    newPeopleData[index].age += 1;
    setPeopleData(newPeopleData);
  };

  return (
    <div>
      {peopleData.map((person, index) => (
        <div key={index}>
          {person.name} is {person.age} years old
          <button onClick={() => handleClick(index)}>Add year</button>
        </div>
      ))}
    </div>
  );
}

在这个例子中，我们使用 useEffect 钩子来监听 peopleData 对象数组的更改。每次 peopleData 更改时，我们在控制台中记录一条消息。这可以帮助我们了解钩子何时会触发。

结论

在 TypeScript 中，将钩子中的 setState 反应到对象数组的值可能需要一些额外的工作，但这并不是一个难题。使用这些提示和技巧，您可以轻松地在组件中跟踪和管理对象数组的值，并且不必牺牲 TypeScript 的优势。