配列に値を追加する際のReactの方法は何ですか。

Reactでは、useStateフックを使用して、動的な値を含む配列を作成し、setArray関数を使用して配列の値を更新することができます。

以下は、新しい値を配列に追加する方法を示す簡単な例です。

import React, { useState } from 'react';

function App() {
  const [array, setArray] = useState([]);

  const addItem = () => {
    // 创建一个新数组，将旧数组的值和新值合并
    const newArray = [...array, '新值'];
    setArray(newArray);
  };

  return (
    <div>
      <button onClick={addItem}>添加新值</button>
      <ul>
        {/* 遍历数组，渲染列表 */}
        {array.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

上記の例では、useStateを使用して空の配列であるarray状態を作成しました。そして、addItem関数を定義し、その関数はボタンをクリックしたときに呼び出されます。addItem関数は、まず新しい配列newArrayを作成し、古い配列の値と新しい値をマージします。最後に、setArrayを使用して状態配列をnewArrayに更新します。

コンポーネントのレンダリングでは、配列をマップするためにmapメソッドを使用して、各配列項目を持つリストをレンダリングします。keyプロパティは一意な値に設定する必要があります。ここでは、keyとしてindexを使用していますが、実際のアプリケーションではユニークなIDを使用することが最適です。

ボタンがクリックされると、addItem関数が呼び出され、新しい値が配列に追加され、コンポーネントが再レンダリングされてビューが更新されます。