React 中的 onClick 会更改 React 中的所有类状态

Question

我在 react 中创建了一个 aside，我想在单击它们时将它们的状态更改为活动状态，但是当我单击任何项目时，它们都会突然被激活。如何解决这个问题？

import React, { useState, useEffect } from "react";
import { Col, Image, Row } from "react-bootstrap";
import "./Company.scss";

// * api
import { getCoin } from "../services/api";

// *spinner
import Loader from "./Loader";

const Company = () => {
  const [changeClass, setChangeClass] = useState(false);
  const [coins, setCoins] = useState([]);

  useEffect(() => {
    const fetchAPI = async () => {
      const data = await getCoin();
      setCoins(data);
    };
    fetchAPI();
  }, []);

  const myHandler = () => {
    setChangeClass(true);
    console.log("trued");
  };

  const myHandler2 = () => {
    console.log();
  };

  return (
    <>
      {coins.length ? (
        coins.map((coin) => (
          <Row
            className={
              changeClass
                ? "p-2 border-top d-flex align-items-center company-list-single-active"
                : "p-2 border-top d-flex align-items-center company-list-single"
            }
            onClick={() => {
              myHandler();
              myHandler2();
            }}
            key={coin.id}
          >
            <Col xxl="2" xl="2" lg="2" md="2" sm="2" xs="2">
              <Image
                src={coin.image}
                alt={coin.name}
                className="coin-image mx-2"
                fluid
              />
            </Col>
            <Col>
              <span>{coin.name}</span>
            </Col>
          </Row>
        ))
      ) : (
        <Loader />
      )}
    </>
  );
};
export default Company;

Answer 1

您使用测试以相同状态显示所选硬币，并在 true 或 false 之间切换。我添加了一个状态来保存选定的硬币并在循环时对其进行测试。在onClick上我们可以直接更新选中的item。

你不能那样做“coins.length？”如果硬币类型是数组，这将始终为真我添加了一个测试，如“coins.length > 0？” 这里是解决方案

import React, { useState, useEffect } from 'react';
import { Col, Image, Row } from 'react-bootstrap';
import './Company.scss';

// * api
import { getCoin } from '../services/api';

// *spinner
import Loader from './Loader';

const Company = () => {
  const [selectedCoin, setSelectedCoin] = useState(null);
  const [coins, setCoins] = useState([]);

  useEffect(() => {
    const fetchAPI = async () => {
      const data = await getCoin();
      setCoins(data);
    };
    fetchAPI();
  }, []);

  return (
    <>
      {coins.length > 0 ? (
        coins.map((coin) => (
          <Row
            className={
              selectedCoin === coin.id
                ? 'p-2 border-top d-flex align-items-center company-list-single-active'
                : 'p-2 border-top d-flex align-items-center company-list-single'
            }
            onClick={() => setSelectedCoin(coin.id)}
            key={coin.id}
          >
            <Col xxl="2" xl="2" lg="2" md="2" sm="2" xs="2">
              <Image src={coin.image} alt={coin.name} className="coin-image mx-2" fluid />
            </Col>
            <Col>
              <span>{coin.name}</span>
            </Col>
          </Row>
        ))
      ) : (
        <Loader />
      )}
    </>
  );
};
export default Company;

React 中的 onClick 会更改 React 中的所有类状态

onClick in React changes all of the classes states in react

javascript

reactjs

react-bootstrap

React 中的 onClick 会更改 React 中的所有 类 状态

onClick in React changes all of the classes states in react

javascript

reactjs

react-bootstrap

React 中的 onClick 会更改 React 中的所有类状态