這是我必須通過各種按鈕顯示信息的代碼。 問題是當我單擊一個按鈕時，其他按鈕會顯示信息

Question

我使用 axios 來檢索數據並嘗試添加撥動開關，但我無法弄清楚。 Prettier 2.7.1 Playground 鏈接

--parser babel

輸入：

function ButtonClick(){
  const [users, setUsers] = useState([])
  const fetchData = () => {
  axios.get("https://iznfqs92n3.execute-api.us-west-1.amazonaws.com/dev/api/v2/movies")
      .then(response => {
        setUsers(response.data)
      })
  }
  return (
    <div>
      <div>
        <h2>Bond Database</h2>
        <Button onClick={() => fetchData()}>Bond Actors</Button>
        {users.length > 0 && (
          <ul>
            {users.map(user => (
              <li key={user.id}>{user.bond_actor}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
      <Button onClick={() => fetchData()}>Directors</Button>
      {users.length > 0 && (
          <ul>
            {users.map(user => (
              <li key={user.id}>{user.director}</li>
            ))}
          </ul>
        )}
      </div>    
      <div>
      <Button onClick={() => fetchData()}>Songs</Button>
      {users.length > 0 && (
          <ul>
            {users.map(user => (
              <li key={user.id}>{user.title_song}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
      <Button onClick={() => fetchData()}>Movie Years</Button>
      {users.length > 0 && (
          <ul>
            {users.map(user => (
              <li key={user.id}>{user.movie_year}</li>
            ))}
          </ul>
        )}
      </div>      
    </div>

  )
}

export default ButtonClick

Output：

import React, { useState } from "react";
import styled from "styled-components";

import axios from "axios";

function ButtonClick() {
  const Button = styled.button`
    background-color: black;
    color: white;
    font-size: 20px;
    padding: 10px 60px;
    border-radius: 5px;
    margin: 10px 0px;
    cursor: pointer;
  `;

  const [users, setUsers] = useState([]);
  const fetchData = () => {
    axios
      .get(
        "https://iznfqs92n3.execute-api.us-west-1.amazonaws.com/dev/api/v2/movies"
      )
      .then((response) => {
        setUsers(response.data);
      });
  };
  const Actors = () => {};
  return (
    <div>
      <div>
        <h2>Bond Database</h2>
        <Button onClick={() => fetchData()}>Bond Actors</Button>
        {users.length > 0 && (
          <ul>
            {users.map((user) => (
              <li key={user.id}>{user.bond_actor}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <Button onClick={() => fetchData()}>Directors</Button>
        {users.length > 0 && (
          <ul>
            {users.map((user) => (
              <li key={user.id}>{user.director}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <Button onClick={() => fetchData()}>Songs</Button>
        {users.length > 0 && (
          <ul>
            {users.map((user) => (
              <li key={user.id}>{user.title_song}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <Button onClick={() => fetchData()}>Movie Years</Button>
        {users.length > 0 && (
          <ul>
            {users.map((user) => (
              <li key={user.id}>{user.movie_year}</li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default ButtonClick;

我相信我可能必須以某種方式編制索引，以確保我按下的按鈕是唯一被按下的按鈕，而不是唯一一個。 我只是不知道如何用我的代碼來實現它。

Answer 1

您對所有按鈕使用相同的 state，這就是您在所有位置獲取數據的原因。

我只是添加了一個類型來區分我點擊了哪個按鈕； 基於此； 數據顯示在 UI 上。

下面是我應用的簡單邏輯。

const fetchData = (type) => {
    axios
      .get(
        "https://iznfqs92n3.execute-api.us-west-1.amazonaws.com/dev/api/v2/movies"
      )
      .then((response) => {
        setUsers({ [type]: response.data });
      });
  };

我根據類型分配基於 state 的數據。 state 數據可以像users.band.map一樣呈現。 我附上沙箱以供參考。