如何在React中不丢失数组的值​？

import React, { useState } from 'react';

function MyComponent() {
  const [myArray, setMyArray] = useState([]);

  const updateArray = () => {
    // 使用不可变性原则创建新的数组
    const newArray = [...myArray, 'new value'];
    setMyArray(newArray);
  };

  return (
    <div>
      <button onClick={updateArray}>Update Array</button>
      <p>Array: {myArray.join(', ')}</p>
    </div>
  );
}

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

function MyComponent() {
  const [myArray, setMyArray] = useState([]);

  useEffect(() => {
    // 执行在myArray发生变化时的操作
    console.log('Array changed:', myArray);
  }, [myArray]);

  const updateArray = () => {
    // 使用不可变性原则创建新的数组
    const newArray = [...myArray, 'new value'];
    setMyArray(newArray);
  };

  return (
    <div>
      <button onClick={updateArray}>Update Array</button>
      <p>Array: {myArray.join(', ')}</p>
    </div>
  );
}

import React, { createContext, useState, useContext } from 'react';

const MyArrayContext = createContext([]);

function MyComponent() {
  const [myArray, setMyArray] = useState([]);

  const updateArray = () => {
    // 使用不可变性原则创建新的数组
    const newArray = [...myArray, 'new value'];
    setMyArray(newArray);
  };

  return (
    <MyArrayContext.Provider value={myArray}>
      <div>
        <button onClick={updateArray}>Update Array</button>
        <p>Array: {myArray.join(', ')}</p>
        <ChildComponent />
      </div>
    </MyArrayContext.Provider>
  );
}

function ChildComponent() {
  const myArray = useContext(MyArrayContext);

  return (
    <div>
      <p>Child Component Array: {myArray.join(', ')}</p>
    </div>
  );
}