在React Hooks useState中执行本地存储时映射数组出现错误(所有内容看起来都颠倒了)*第一次代码看起来乱七八糟

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

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 从本地存储中获取数据，并将其转换为数组形式
    const storedData = localStorage.getItem('myData');
    const dataArray = storedData ? JSON.parse(storedData) : [];

    // 将转换后的数组作为初始值
    setData(dataArray);
  }, []);

  const handleAddItem = () => {
    // 在需要时更新数组
    const newItem = 'New Item';
    const updatedData = [...data, newItem];

    // 更新状态变量和本地存储
    setData(updatedData);
    localStorage.setItem('myData', JSON.stringify(updatedData));
  };

  return (
    <div>
      <button onClick={handleAddItem}>Add Item</button>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;