根据数组的ID REACT显示数组的单个元素

const [arrayData, setArrayData] = useState([]);
const [selectedElement, setSelectedElement] = useState(null);

useEffect(() => {
  // 获取数组数据的逻辑，可以是从后端API获取或者本地数据
  const fetchData = async () => {
    try {
      const response = await fetch('API_URL');
      const data = await response.json();
      setArrayData(data);
    } catch (error) {
      console.error('Error fetching array data:', error);
    }
  };

  fetchData();
}, []);

const renderSelectedElement = () => {
  if (selectedElement) {
    // 根据选中的元素ID查找对应的数组元素
    const element = arrayData.find(item => item.id === selectedElement);
    if (element) {
      return (
        <div>
          <h2>{element.title}</h2>
          <p>{element.description}</p>
          {/* 其他元素属性的展示 */}
        </div>
      );
    }
  }
  return null;
};

return (
  <div>
    {/* 显示数组的所有元素 */}
    {arrayData.map(item => (
      <div key={item.id} onClick={() => setSelectedElement(item.id)}>
        <h3>{item.title}</h3>
        {/* 其他元素属性的展示 */}
      </div>
    ))}
    {/* 显示选中的元素 */}
    {renderSelectedElement()}
  </div>
);