React使用useState切换布尔值控制图片显示失败问题求助

你代码里存在以下几个问题：

• 变量命名冲突：组件接收的props参数名image和你本地声明的state变量名重复，会直接触发变量重复声明的报错
• 图片渲染逻辑错误：
  • 遍历data时的判断条件item.img === img中，img属于未定义变量，判断条件永远不成立，图片不会渲染
  • 给img标签src赋值时错误使用了状态更新函数setImage作为索引，应该使用state的取值image
  • img是自闭和标签，不允许在标签内部插入{image}这类内容
• 冗余逻辑：你仅需要切换两张固定图片，不需要定义data数组再遍历，直接通过state值取对应图片即可

修正后的完整代码 #

import React, { useState } from 'react'
import styles from './styles.module.scss'
import { Link } from 'react-router-dom'
import DjalKokildak from '../../../../assets/images/DjalKokildak.png'
import Turpachaty from '../../../../assets/images/Turpachaty.png'

// 不需要父组件传值控制图片的话可以删掉props参数
const Fields = () => {
    // 改用语义更清晰的状态名，避免命名冲突
    const [isShowFirst, setIsShowFirst] = useState(true)
    // 直接定义图片映射对象即可，不需要多余嵌套
    const imgMap = {
      true: DjalKokildak,
      false: Turpachaty
    }
     
    return (
     <div className={styles.container}> 
        <div className={styles.wrapper}>
            <div className={styles.line} />
            <div className={styles.contentBlock}>
                <div className={styles.titleBlock}>
                    <h1 className={styles.title}>месторождения</h1>
                    <p className={styles.text}>“Джал-Кокильдак” и “Турпачаты”</p>
                    <Link to='/' className={styles.link}>подробнее</Link>
                </div>
                <div className={styles.actionBlock}>
                    <button onClick={() => setIsShowFirst(false)} className={styles.button}>след</button>
                    <div className={styles.imgBlock}>
                        {/* 直接通过状态值取对应图片 */}
                        <img src={imgMap[isShowFirst]} alt="矿场图片" />
                    </div>
                    <button onClick={() => setIsShowFirst(true)} className={styles.button}>пред</button>
                </div>
            </div>
        </div>
     </div> 
    )
}

export default Fields

内容的提问来源于stack exchange，提问作者Kalykov Aaty