如何在 React 中切换地图功能？

Question

我尝试加载用户历史记录并在 table 中显示它。在这个 table 里面应该有一个带有“显示更多”的按钮这个按钮是一个下拉切换按钮。到目前为止一切正常，但是当我单击地图功能内的按钮时，所有下拉菜单同时打开。我知道我必须在地图函数中使用索引，但我不知道如何将此索引用于我的下拉状态。

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useSelector } from 'react-redux';


function OrderHistory() {
  const [history, setHistory] = useState([]);
  const [dropdown, setDropdown] = useState(false);

  const auth = useSelector((state) => state.auth);
  const token = useSelector((state) => state.token);
  const { user } = auth;

  useEffect(() => {
    const getHistory = async () => {
      const res = await axios.get('/user/history', {
        headers: { Authorization: token },
        userid: user._id,
      });
      setHistory(res.data);
    };
    getHistory();
  }, [token, setHistory]);
  console.log(history);

  const clickHandler = (index) => (event) => {
    //event.preventDefault();
    setDropdown(!dropdown);
    console.log('clicked');
  };

  return (
    <div className='history-page h-screen'>
      <h2>History</h2>
      <h4>You have {history.length} ordered</h4>

      <table>
        <thead>
          <tr>
            <th>Bestellnummer</th>
            <th>Datum</th>
            <th>Summe</th>
            <th>Details</th>
          </tr>
        </thead>
        <tbody>
          {history.map((items, index) => (
            <tr key={items._id}>
              <td>
                {items._id}
              </td>
              <td>{new Date(items.createdAt).toLocaleDateString()}</td>
              <td>
                {(
                  Math.round(
                    items.cartItems.reduce((x, item) => x + item.price, 0) * 100
                  ) / 100
                ).toFixed(2)}
                €
              </td>
              <td>
                <button
                  class='bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 px-4 rounded'
                  key={index}
                  onClick={clickHandler(index)}
                >
                  Show more
                </button>
                <div className={dropdown ? '' : 'hidden'}>
                  <div>{items.firstName}</div>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default OrderHistory;

Answer 1

用 null 初始化下拉状态。

const [dropdown, setDropdown] = useState(null);

在 clickHandler 存储中，我只存储索引。

const clickHandler = (index) => {
        setDropdown((prev) => {
            return prev === index ? null : index;
        });
        console.log('clicked', index);
    };

现在在地图功能中，检查您应用条件以显示下拉列表的位置。我检查 dropdown 是否等于该索引，然后该下拉列表将可见，否则添加 hidden class.

您也可以使用 _id 到 show/hide 下拉列表而不是 index

<td>
    <button
        class='bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 px-4 rounded'
        key={index}
        onClick={() => clickHandler(index)}
    >
        Show more
    </button>
    <div
        className={dropdown === index ? '' : 'hidden'}
        // style={{ display: dropdown === index ? 'block' : 'none' }}
    >
        <div>{items.firstName}</div>
    </div>
</td>

如何在 React 中切换地图功能？

How to toggle in a map function in React?

reactjs

dictionary

toggle

use-state