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

Question

I used axios to retrieve the data and I tried to add toggle switches, but I wasn't able to figure it out. Prettier 2.7.1 Playground link

--parser babel

Input:

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;

I believe that I may have to index somehow a way to make sure the button I press is the only button being pressed and not the only one. I just don't know how to implement it with my code.

Answer 1

You are using the same state for all the buttons, which is why you get the data in all places.

I just added a type to differentiate which button I clicked; based on that; the data is displayed on UI.

Below is the simple logic that I applied.

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

I'm assigning data based on the state based on the type. The state data can be rendered like users.band.map . I am attaching the sandbox for reference.