从按钮列表中仅选择一个按钮

Question

我有一个组件，它有几张卡片，每张卡片都有一个按钮。这是组件：

import React, { useState, useEffect } from "react";
import "./App.css";
import { Card, Container, Row, Col, Button } from "react-bootstrap";

function ListItemComponent() {
  let [responseData, setResponseData] = useState([]);
  const [isFavorite, setIsFavorite] = useState(false);

  useEffect(() => {
    fetch("https://api.quotable.io/authors?limit=10&skip=20")
      .then((res) => res.json())
      .then((data) => {
        console.log(data.results);
        setResponseData(data.results);
      });
  }, []);

  console.log({ responseData });

  var testObject = { one: 1, two: 2, three: 3 };

  // Put the object into storage
  localStorage.setItem("testObject", JSON.stringify(testObject));

  // Retrieve the object from storage
  var retrievedObject = localStorage.getItem("testObject");

  console.log("retrievedObject: ", JSON.parse(retrievedObject));

  const handleClick = () => {
    setIsFavorite((s) => !s);
  };

  return (
    <div>
      <Container>
        <Row>
          {responseData && responseData.length > 0 ? (
            responseData.map((author) => {
              return (
                <Col xl={6} lg={6} md={12} sm={12} xs={12} key={author.link}>
                  <Card>
                    <Card.Body>
                      <p>
                        <b>Name:</b> {author.name}
                      </p>
                      <p>
                        <b>Bio:</b> {author.bio}
                      </p>
                      <a href={author.link}>Link</a>
                      {isFavorite ? (
                        <Button variant="danger" onClick={handleClick}>
                          Remove Favorite
                        </Button>
                      ) : (
                        <Button variant="success" onClick={handleClick}>
                          Add Favorite
                        </Button>
                      )}
                    </Card.Body>
                  </Card>
                </Col>
              );
            })
          ) : (
            <p>No Data Found</p>
          )}
        </Row>
      </Container>
    </div>
  );
}

export default ListItemComponent;

这是现在正在发生的事情的 GIF：https://recordit.co/C8gUJ0ByRY。所以现在如果我只点击一个按钮，所有卡片中的所有按钮都会被选中并从Add Favorite更改为Remove Favorite，但我想更改唯一被点击的按钮的文本，而不是全部。

Answer 1

在您的实际代码中，isFavorit 变量用于列表的所有元素。您可以更改为使列表中的每个对象都拥有 isFavorit 变量，这样，只有 isFavorite = true 的对象才会改变。

import React, { useState, useEffect } from "react";
import "./App.css";
import { Card, Container, Row, Col, Button } from "react-bootstrap";

function ListItemComponent() {
  let [responseData, setResponseData] = useState([]);

  useEffect(() => {
    fetch("https://api.quotable.io/authors?limit=10&skip=20")
      .then((res) => res.json())
      .then((data) => {
        console.log(data.results);
        setResponseData(data.results.map((result) => ({...result,isFavorite:false})));
      });
  }, []);

  console.log({ responseData });

  var testObject = { one: 1, two: 2, three: 3 };

  // Put the object into storage
  localStorage.setItem("testObject", JSON.stringify(testObject));

  // Retrieve the object from storage
  var retrievedObject = localStorage.getItem("testObject");

  console.log("retrievedObject: ", JSON.parse(retrievedObject));

  const handleClick = (a) => {
    const author = responseData.find(el => el._id === a._id);
    author.isFavorite = !author.isFavorite;
    const list = responseData.map(el => author._id === el._id ? author : el );
    setResponseData(list);
    // setIsFavorite((s) => !s);
  };

  return (
    <div>
      <Container>
        <Row>
          {responseData && responseData.length > 0 ? (
            responseData.map((author) => {
              return (
                <Col xl={6} lg={6} md={12} sm={12} xs={12} key={author.link}>
                  <Card>
                    <Card.Body>
                      <p>
                        <b>Name:</b> {author.name}
                      </p>
                      <p>
                        <b>Bio:</b> {author.bio}
                      </p>
                      <a href={author.link}>Link</a>
                      {author.isFavorite ? (
                        <Button variant="danger" onClick={() => handleClick(author)}>
                          Remove Favorite
                        </Button>
                      ) : (
                        <Button variant="success" onClick={() => handleClick(author)}>
                          Add Favorite
                        </Button>
                      )}
                    </Card.Body>
                  </Card>
                </Col>
              );
            })
          ) : (
            <p>No Data Found</p>
          )}
        </Row>
      </Container>
    </div>
  );
}

export default ListItemComponent;

Answer 2

import React, { useState, useEffect } from "react";
import "./App.css";
import { Card, Container, Row, Col, Button } from "react-bootstrap";

function ListItemComponent() {
  let [responseData, setResponseData] = useState([]);
  const [isFavorite, setIsFavorite] = useState(false);
  const [index, setIndex] = useState(false);

  useEffect(() => {
    fetch("https://api.quotable.io/authors?limit=10&skip=20")
      .then((res) => res.json())
      .then((data) => {
        console.log(data.results);
        setResponseData(data.results);
      });
  }, []);

  console.log({ responseData });

  var testObject = { one: 1, two: 2, three: 3 };

  // Put the object into storage
  localStorage.setItem("testObject", JSON.stringify(testObject));

  // Retrieve the object from storage
  var retrievedObject = localStorage.getItem("testObject");

  console.log("retrievedObject: ", JSON.parse(retrievedObject));

  const handleClick = (id) => {
    setIsFavorite((s) => !s);
    setIndex(id);
    console.log(id);
  };

  return (
    <div>
      <Container>
        <Row>
          {responseData && responseData.length > 0 ? (
            responseData.map((author) => {
              return (
                <Col xl={6} lg={6} md={12} sm={12} xs={12} key={author.link}>
                  <Card>
                    <Card.Body>
                      <p>
                        <b>Name:</b> {author.name}
                      </p>
                      <p>
                        <b>Bio:</b> {author.bio}
                      </p>
                      <a href={author.link}>Link</a>
                      {isFavorite && index === author.link ? (
                        <Button
                          variant="danger"
                          onClick={() => handleClick(author.link)}
                        >
                          Remove Favorite
                        </Button>
                      ) : (
                        <Button
                          variant="success"
                          onClick={() => handleClick(author.link)}
                        >
                          Add Favorite
                        </Button>
                      )}
                    </Card.Body>
                  </Card>
                </Col>
              );
            })
          ) : (
            <p>No Data Found</p>
          )}
        </Row>
      </Container>
    </div>
  );
}

export default ListItemComponent;

Answer 3

你应该创建一个收藏夹数组，数组上的每个项目都会用一个按钮连接，像这样：

const [favorites, setFavorites] = useState(Array(responseData.length).fill(false));

当您点击按钮时，您将发送索引点击按钮来切换按钮的收藏夹：

 const handleClick = (index) => {
    setFavorites((favorites) => favorites.map((favorite, i) => {
            if(i == index) return !favorite
            else return favorite
   }));
  };

你的组件：

import React, { useState, useEffect } from "react";
import "./App.css";
import { Card, Container, Row, Col, Button } from "react-bootstrap";

function ListItemComponent() {
  let [responseData, setResponseData] = useState([]);

const [favorites, setFavorites] = useState(Array(responseData.length).fill(false));

  useEffect(() => {
    fetch("https://api.quotable.io/authors?limit=10&skip=20")
      .then((res) => res.json())
      .then((data) => {
        console.log(data.results);
        setResponseData(data.results);
      });
  }, []);

  console.log({ responseData });

  var testObject = { one: 1, two: 2, three: 3 };

  // Put the object into storage
  localStorage.setItem("testObject", JSON.stringify(testObject));

  // Retrieve the object from storage
  var retrievedObject = localStorage.getItem("testObject");

  console.log("retrievedObject: ", JSON.parse(retrievedObject));

 const handleClick = (index) => {
    setFavorites((favorites) => favorites.map((favorite, i) => {
            if(i == index) return !favorite
            else return favorite
   }));
  };

  return (
    <div>
      <Container>
        <Row>
          {responseData && responseData.length > 0 ? (
            responseData.map((author,i) => {
              return (
                <Col xl={6} lg={6} md={12} sm={12} xs={12} key={author.link}>
                  <Card>
                    <Card.Body>
                      <p>
                        <b>Name:</b> {author.name}
                      </p>
                      <p>
                        <b>Bio:</b> {author.bio}
                      </p>
                      <a href={author.link}>Link</a>
                      {favorites[i] ? (
                        <Button variant="danger" onClick={handleClick}>
                          Remove Favorite
                        </Button>
                      ) : (
                        <Button variant="success" onClick={handleClick}>
                          Add Favorite
                        </Button>
                      )}
                    </Card.Body>
                  </Card>
                </Col>
              );
            })
          ) : (
            <p>No Data Found</p>
          )}
        </Row>
      </Container>
    </div>
  );
}

export default ListItemComponent;