如何在 React JS 中使用 map 方法在按鈕 onclick 上調用數組數據

Question

您好，我是 ReactJS 的新手。 我需要幫助，我正在使用 reactjs 開展一個項目。 在這個項目中，我想在按鈕中實現 onClick 事件，我希望在單擊按鈕時出現所有數據（注意： - 在單擊按鈕之前不應出現數據）。

對於數據，我在這個 js 文件中創建了一個 js 文件，所有數據都以數組的形式存儲。

提前致謝。

對不起，我的英語不好。

Answer 1

Map function 將當前的 object 作為第一個參數傳遞。

{array.map((obj) => {
    return <button onClick={() => handleClick(obj)}></button>
}

現在你在handleClick function中有obj。 只需獲取 function 中的參數即可

const handleClick = (obj) => {
  // Use obj here to access data
}

Answer 2

嘗試這個：

數據.js

const data = [
  {
    id: 1,
    name: 'Bulls',
    city: 'Chicago',
  },
  {
    id: 2,
    name: 'Suns',
    city: 'Phoenix',
  },
  {
    id: 3,
    name: 'Magic',
    city: 'Orlando',
  },
  {
    id: 4,
    name: 'Lakers',
    city: 'Los Angeles',
  },
  {
    id: 5,
    name: 'Celtics',
    city: 'Boston',
  },
  {
    id: 6,
    name: 'Hornets',
    city: 'Charlotte',
  },
  {
    id: 7,
    name: 'Knicks',
    city: 'New York',
  },
];

export default data;

應用程序.js

import React, { useState, useEffect } from 'react';
import './App.css';

import data from './data';

function App() {
  const [isShow, setIsShow] = useState(false);
  const [datas, setDatas] = useState();

  const showData = () => {
    setIsShow(true);
  };

  useEffect(() => {
    setDatas(data);
  }, []);

  return (
    <div className="App">
      <button onClick={showData}>Show data</button>

      <div>
        {isShow
          ? datas.map((data) => (
              <p key={data.id}>
                {data.city} - {data.name}
              </p>
            ))
          : ''}
      </div>
    </div>
  );
}

export default App;

演示： stackblitz