这是我必须通过各种按钮显示信息的代码。 问题是当我单击一个按钮时，其他按钮会显示信息

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一样呈现。 我附上沙箱以供参考。