如何使用react中的useState钩子从json中分离键和值并将其存储在数组中

import React, { useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState([]);
  // 初始状态为空数组
  // setData用于更新data的值
  // useState([])中的参数[]是data的初始值
  // data是存储键值对的数组
}

const jsonData = '{"key1": "value1", "key2": "value2", "key3": "value3"}';
const parsedData = JSON.parse(jsonData);
// 使用JSON.parse()将JSON字符串解析为JavaScript对象

const keys = Object.keys(parsedData);
const values = Object.values(parsedData);
// 使用Object.keys()获取所有键
// 使用Object.values()获取所有值
// keys和values分别存储键和值的数组

setData(keys.map((key, index) => ({ key, value: values[index] })));
// 使用map()方法将键和值组合成对象，并更新data的值
// 每个对象包含键和对应的值

import React, { useState } from 'react';

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

  const jsonData = '{"key1": "value1", "key2": "value2", "key3": "value3"}';
  const parsedData = JSON.parse(jsonData);

  const keys = Object.keys(parsedData);
  const values = Object.values(parsedData);

  setData(keys.map((key, index) => ({ key, value: values[index] })));

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>
          <span>{item.key}: </span>
          <span>{item.value}</span>
        </div>
      ))}
    </div>
  );
}

export default MyComponent;