如何在react js中从api映射两个不同的数据值。

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

const MyComponent = () => {
  const [data, setData] = useState([]);
  const [mappedValue1, setMappedValue1] = useState('');
  const [mappedValue2, setMappedValue2] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('your-api-endpoint');
      const jsonData = await response.json();
      setData(jsonData);
    };

    fetchData();
  }, []);

  useEffect(() => {
    // 在数据更新后进行映射操作
    // 假设你想映射data中的name属性和age属性
    const mappedData1 = data.map(item => item.name);
    const mappedData2 = data.map(item => item.age);

    setMappedValue1(mappedData1);
    setMappedValue2(mappedData2);
  }, [data]);

  return (
    <div>
      <h1>Mapped Value 1:</h1>
      <ul>
        {mappedValue1.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <h1>Mapped Value 2:</h1>
      <ul>
        {mappedValue2.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;