将项目添加到挂钩中的 React 数组 - Javascript

在 React 中，可以使用挂钩（Hooks）来拓展函数组件的功能。每个挂钩都是一个函数，它可以让你在函数组件中使用类组件中的生命周期、状态等功能。

其中一个常用的挂钩是 useEffect，它可以让你在处理副作用时执行一些操作。

当你在处理副作用时需要添加一些项目到数组中时，可以使用 useEffect 中的第二个参数来完成此操作。

步骤

首先，在函数组件中导入 useEffect。

import React, { useEffect } from 'react';

然后，定义一个数组并使用 useState 来创建它：

const [array, setArray] = useState([]);

现在，你可以在 useEffect 函数中更新这个数组：

useEffect(() => {
  setArray([...array, newItem]);
}, [newItem]);

当 newItem 变化时，useEffect 函数会重新运行并将 newItem 添加到数组中。

代码片段

定义数组和添加按钮

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

function ArrayAdder() {
  const [array, setArray] = useState([]);
  const [newItem, setNewItem] = useState('');

  const handleAdd = () => {
    setArray([...array, newItem]);
    setNewItem('');
  };

  return (
    <div>
      <ul>
        {array.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <div>
        <input type="text" value={newItem} onChange={(e) => setNewItem(e.target.value)} />
        <button onClick={handleAdd}>Add</button>
      </div>
    </div>
  );
}

export default ArrayAdder;

添加 useEffect

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

function ArrayAdder() {
  const [array, setArray] = useState([]);
  const [newItem, setNewItem] = useState('');

  const handleAdd = () => {
    setNewItem('');
  };

  useEffect(() => {
    if (newItem !== '') {
      setArray([...array, newItem]);
    }
  }, [newItem]);

  return (
    <div>
      <ul>
        {array.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <div>
        <input type="text" value={newItem} onChange={(e) => setNewItem(e.target.value)} />
        <button onClick={handleAdd}>Add</button>
      </div>
    </div>
  );
}

export default ArrayAdder;

使用 useEffect 中的第二个参数

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

function ArrayAdder() {
  const [array, setArray] = useState([]);
  const [newItem, setNewItem] = useState('');

  const handleAdd = () => {
    setNewItem('');
  };

  useEffect(() => {
    if (newItem !== '') {
      setArray([...array, newItem]);
    }
  }, [newItem, array]);

  return (
    <div>
      <ul>
        {array.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <div>
        <input type="text" value={newItem} onChange={(e) => setNewItem(e.target.value)} />
        <button onClick={handleAdd}>Add</button>
      </div>
    </div>
  );
}

export default ArrayAdder;

以上就是在 React 中将项目添加到挂钩中的数组的实现过程和代码示例。