React.js选择下拉选项切换图片时src显示变量名不渲染如何解决？

• 选项value为纯字符串，未关联导入的图片变量：你通过import引入的ledger1、ledger4本身就是打包后的真实路径值，但<option>中写的value="ledger1"是普通文本，二者没有对应关系，导致存入状态的是字符串而非实际路径。
• 组件返回多根节点语法错误：React要求组件只能返回单个根元素，你当前return里有两个并列的<div>，属于语法错误，会导致渲染异常，也就是你感知到的“未触发重新渲染”。

有两种实现方式，按需选择即可：

方案1：新增图片映射表（推荐，后续扩展选项更方便） #

新增映射表关联选项值与真实路径，同时修正根节点问题，完整代码如下：

import ledger1 from '../media/ledger1.png'
import ledger4 from '../media/ledger4.png'
import { useState } from 'react'

// 图片映射表：key对应option的value值，value对应导入的真实图片路径
const imgMap = {
  ledger1: ledger1,
  ledger4: ledger4
}

const RarityMenu = () => {
  const [imgselected, setimg] = useState({
    color: '',
    background: '',
  });
  const { color } = imgselected;

  const getImageData = (e: any) => {
    setimg({
      ...imgselected,
      [e.target.name]: e.target.value
    })
  }

  return (
    {/* 用React Fragment包裹所有元素，解决多根节点问题 */}
    <>
      <div>
        <form>
          <label>Color</label>
          <select
            name="color"
            value={color}
            onChange={getImageData}
          >
            <option value="ledger1">Color1</option>
            <option value="ledger4">Color2</option>
          </select>
        </form>
      </div>
      <div>
        {/* 从映射表取真实路径渲染 */}
        <img src={color ? imgMap[color as keyof typeof imgMap] : ''} alt="账本预览" />
      </div>
    </>
  )
}

方案2：直接绑定导入变量到option的value #

不需要额外加映射表，直接把导入的图片变量赋值给option的value属性：

// 仅展示修改部分代码
<select
  name="color"
  value={color}
  onChange={getImageData}
>
  <option value={ledger1}>Color1</option>
  <option value={ledger4}>Color2</option>
</select>

// img标签直接使用状态值即可
<img src={color} alt="账本预览" />

内容的提问来源于stack exchange，提问作者0xNicko