根据数组索引更改图像的 State - React.js

Question

我有一些带有 svg 的卡片，需要根据点击单独（向上和向下）更改状态。 模态由引导程序处理。 所以，我试图根据数组的索引更改 svg（硬编码）的 state。 但是，即使我得到了 id（动态的），每次我点击 svg 箭头时，所有 svg 都在改变状态。

我认为 state 不应在 for 循环中更改，我想知道问题是否来自 {this.state.arrowShown && }。 那么，如何只改变被点击的卡片的svg state，而不改变其他人的state呢？

import Container from 'react-bootstrap/Container'
import Card from 'react-bootstrap/Card'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import { withTranslation } from 'react-i18next';
import Accordion from 'react-bootstrap/Accordion'
import Button from 'react-bootstrap/Button'

class ProjectCard extends React.Component {

    constructor() {
        super();
        this.state = {
            arrowShown: true,
            arrowHidden: false,
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event, index) {
        const id = event.currentTarget.id;
        const projectArr = this.props.projects;
        console.log("this.props.porjects", this.props.projects)
        for (var i = 0; i < projectArr.length; i++) {
            console.log("projectArr[i].idP1", projectArr[i].idP2)
            if (projectArr[i].idP2 === id) {
                console.log("same same")
                this.setState({
                    arrowShown: !this.state.arrowShown,
                    arrowHidden: !this.state.arrowHidden
                })
                // newState[projectArr[i].idP2.arrowShown] = projectArr[i].idP2 === projectArr[i].idP2
            }
        }
        //     // this.setState(newState)
        // }
    }
    render() {
        const { t } = this.props;
        // arrowHidden = {}
        return (
            <React.Fragment>
                <Container fluid className=" pb-5" id="Projects">
                    <Row className="d-flex justify-content-center py-5" xs={1} md={1} lg={3}>
                        {this.props.projects.map((project, index) => (
                            <Col className="d-flex justify-content-center px-5 py-5" key= 
                               {project.keyP}>
                                <Card className="bg-warning" border="light" >
                                    <Card.Img variant="top" src={project.srcP} 
                                    className="overlay" />
                                    <Card.Body className="bg-light">
                                        <Card.Title className="text-warning" > 
                                        t(project.titleP)}</Card.Title>
                                        <Card.Text>
                                            {t(project.descriptionP)}
                                        </Card.Text>
                                        <Accordion>

                                            <Accordion.Toggle as={Button} variant="link" 
                                               eventKey="0" className="p-0" id={project.idP1}  >
                                                <Card.Title className="text-warning" >
                                                    Features

                                                 {this.state.arrowShown
                                                        <svg id={project.idP2} onClick={(event) => { this.handleClick(event, index) }} width="1em" height="1em" viewBox="0 0 16 16" className=" down bi bi-chevron-double-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg" >
                                                            <path fillRule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
                                                            <path fillRule="evenodd" d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
                                                        </svg>

                                                    }
                                                    {this.state.arrowHidden &&


                                                        <svg id={project.idP3} onClick={(event) => { this.handleClick(event, index) }} width="1em" height="1em" viewBox="0 0 16 16" className=" up bi bi-chevron-double-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg"  >
                                                            <path fillRule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708l6-6z" />
                                                            <path fillRule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" />
                                                        </svg>
                                                    }
                                                </Card.Title>
                                            </Accordion.Toggle> ```

ps: it is my first question so every feedback is welcome! Thank you for your support.

[enter image description here][1]


  [1]: https://i.stack.imgur.com/0YD01.png

Answer 1

您正在为此处的每张图片更改 state

this.setState({
        arrowShown: !this.state.arrowShown,
        arrowHidden: !this.state.arrowHidden
    })

并显示具有相同 state 值的每张图像。 这就是为什么每次翻转一个图像时所有图像都会被翻转的原因。

你可以做的是维护一个 state 这样的东西

       this.state = {  
           [index1] : { arrowShown : true , arrowHidden :false }  ,
           [index2] : { arrowShown : true , arrowHidden :false }  ,
       //and so on
       }

然后每当基于点击图像的索引你只更新 state 像这样的特定索引......

       this.setState({[indexOfTheClickedImage ] : { 
                arrowShown: !this.state.[indexOfTheClickedImage].arrowShown ,
                arrowHidden: !this.state.[indexOfTheClickedImage].arrowHidden
       }}