如何在状态反应中添加数组数据 - Javascript

在Javascript中，状态反应（stateful）组件可以用类（class）或函数（function）定义。无论使用哪种方式，都有一种机制可以更新组件状态（state），即调用setState方法。

在setState方法中，你可以传递一个新的状态对象，该对象中包含需要更新的状态属性及其新的值。如果你想要在已有的状态数组中添加新的数据，可以将新数据添加到旧数组中，然后将整个数组传入setState方法。

接下来，让我们通过一个示例来演示如何在状态反应中添加数组数据。

示例

假设我们有一个点赞功能，用户可以点击按钮点赞某篇文章。我们需要记录当前已点赞用户的列表，并在用户点赞后将其加入列表。我们可以使用以下代码实现这个功能：

import React, { useState } from 'react';

function Article() {
  const [likes, setLikes] = useState([]);

  const handleLike = () => {
    const newLikes = [...likes, 'user'];
    setLikes(newLikes);
  };

  return (
    <div>
      <h1>文章标题</h1>
      <p>这是一篇很棒的文章</p>
      <button onClick={handleLike}>点赞</button>
      <p>{likes.length}人点赞：</p>
      <ul>
        {likes.map((like, index) => (
          <li key={index}>{like}</li>
        ))}
      </ul>
    </div>
  );
}

export default Article;

代码解释：

首先，我们在组件中定义一个名为likes的状态数组，并初始化为空数组。

然后，我们在handleLike函数中创建一个新的数组newLikes，该数组包含旧数组likes中的所有元素以及一个新的字符串'user'。

最后，我们将新数组newLikes传入setLikes函数中，从而更新组件状态。

在渲染组件时，我们使用likes.map()方法遍历likes数组，将每个点赞用户显示为一个列表项。注意，我们使用了key属性来确保每个列表项都有唯一的标识符。

这就是如何在状态反应组件中添加数组数据的基本步骤。你可以根据自己的需求对代码进行调整和扩展。

总结

状态反应（stateful）组件是React中非常重要的概念，它允许我们在组件中保存一些状态（如用户输入、计数器等）并随时更新。在更新状态时，我们可以使用setState方法来传递一个新的状态对象。如果需要在状态数组中添加新的数据，只需要将新数据添加到旧数组中，然后将整个数组传入setState方法即可。