React应用基于语言选择的图片显示异常问题求助

在React应用中实现基于语言选择的图片展示功能时，图片无法根据选定语言正确渲染。项目包含ImgData（处理图片加载逻辑）和ImgSwitch（根据选中语言切换图片）两个核心组件，但切换时始终显示“当前语言未找到对应图片”提示，尽管图片已按语言分类且导入路径正确。已检查筛选逻辑、路径命名、项目配置，问题仍未解决，需排查方法和解决方案。

相关组件代码 #

ImgData.js #

// Importação das bibliotecas necessárias do React e de componentes relacionados.
import React, { useState } from 'react';
import ImgSwitch from './imgswitch'; // Importa um componente chamado ImgSwitch de um arquivo chamado 'imgswitch.js'.
import loading from '../img/loading.png'; // Importa uma imagem chamada 'loading.png' do diretório '../img/'.
import { css } from '@emotion/react'; // Importa a função css da biblioteca @emotion/react.
import { RingLoader } from 'react-spinners'; // Importa o componente RingLoader da biblioteca 'react-spinners'.

// Declaração do componente ImgData.
function ImgData() {
  // Definição de estados utilizando o Hook useState do React.
  const [showImage, setShowImage] = useState(false); // Estado para controlar a exibição da imagem.
  const [filesData, setFilesData] = useState([]); // Estado para armazenar os dados dos ficheiros.
  const [isLoading, setIsLoading] = useState(false); // Estado para controlar o carregamento.

  // Função que é chamada ao clicar no botão para selecionar ficheiros.
  function handleBrowseClick() {
    setIsLoading(true); // Ativa o estado de carregamento.
    const input = document.createElement('input'); // Cria um elemento de input.
    input.setAttribute('type', 'file'); // Define o tipo do input como 'file' (ficheiro).
    input.setAttribute('multiple', ''); // Permite a seleção de múltiplos ficheiros.
    input.addEventListener('change', handleFileSelect); // Adiciona um listener para lidar com a seleção de ficheiros.
    input.click(); // Simula um clique no input de ficheiro.
  }

  // Função chamada quando um ou vários ficheiros são selecionados.
  function handleFileSelect(event) {
    const selectedFiles = event.target.files; // Obtém os ficheiros selecionados.

    if (selectedFiles.length > 0) {
      // Cria novos ficheiros com um caminho modificado e os adiciona ao estado.
      const filesWithNewPath = Array.from(selectedFiles).map(file => {
        const fileName = file.name;
        return new File([file], `../img/${fileName}`, { type: file.type });
      });
      setFilesData([...filesData, ...filesWithNewPath]); // Atualiza o estado dos ficheiros.
    }

    setShowImage(true); // Mostra a imagem após selecionar os ficheiros.
  }

  // Estilos para o componente de carregamento.
  const loadingStyle = {
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  };

  // Estilos para o spinner.
  const spinnerStyle = css`
    display: block;
    margin: 0 auto;
    border-color: red;
  `;

  // Renderização do componente ImgData.
  return (
    <div>
      {!showImage && (
        <div style={loadingStyle}>
          {isLoading ? (
            <RingLoader color={'#448b85'} loading={true} css={spinnerStyle} size={50} />
          ) : (
            <img src={loading} alt="Loading" onClick={handleBrowseClick} style={{ cursor: 'pointer' }} />
          )}
        </div>
      )}
      {showImage && <ImgSwitch filesData={filesData} />}
    </div>
  );
}

// Exportação do componente ImgData para ser utilizado noutras partes da aplicação.
export default ImgData;

ImgSwitch.js #

// Importação das bibliotecas React e Hooks necessários.
import React, { useState, useEffect } from 'react';

// Declaração do componente ImgSwitch que recebe props filesData e language.
function ImgSwitch({ filesData, language }) {
  // Estado para controlar a imagem a ser exibida.
  const [displayImage, setDisplayImage] = useState(null);

  // Efeito que é executado quando filesData ou language são alterados.
  useEffect(() => {
    // Procura a imagem traduzida com base no idioma selecionado.
    const translatedImage = filesData.find((fileData) => {
      const { name } = fileData;
      const langPrefix = `${language}-`;

      if (name.startsWith(langPrefix)) {
        console.log('Encontrada imagem com prefixo de idioma atual:', name);
        return true;
      }

      const fallbackLangPrefix = 'EN-';
      if (language !== 'EN' && name.startsWith(fallbackLangPrefix)) {
        console.log('Encontrada imagem com prefixo de idioma alternativo:', name);
        return true;
      }

      return false;
    });

    console.log('Imagem traduzida:', translatedImage);

    // Define a imagem a ser exibida no estado.
    setDisplayImage(translatedImage);
  }, [filesData, language]);

  // Renderização do componente ImgSwitch.
  return (
    <div>
      {displayImage ? (
        // Exibe a imagem com um URL de objeto criado.
        <img src={URL.createObjectURL(displayImage)} alt={displayImage.name} />
      ) : (
        // Caso não haja imagem para o idioma selecionado.
        <p>Não foi encontrada nenhuma imagem para o idioma atual.</p>
      )}
    </div>
  );
}

// Exportação do componente ImgSwitch para ser utilizado noutras partes da aplicação.
export default ImgSwitch;

尝试与结果 #

尝试基于所选语言切换图片，预期按选定语言展示图片；实际始终显示“当前语言未找到对应图片”提示。已执行排查步骤：检查ImgSwitch的图片筛选逻辑、图片路径与命名、项目配置文件，但问题仍存在。

核心问题定位 #

1. language属性未传递：ImgData调用ImgSwitch时仅传入filesData，未传递language参数，导致ImgSwitch中language为undefined，筛选逻辑完全失效。
2. 文件名被错误修改：ImgData中创建File对象时给文件名添加了../img/前缀（如原EN-xxx.png变为../img/EN-xxx.png），破坏了ImgSwitch中基于文件名前缀的匹配逻辑。

分步解决方案 #

1. 修复language属性传递

在ImgData中添加语言状态（或从上层组件接收language props），并传递给ImgSwitch：

// 方式1：在ImgData内部维护语言状态
function ImgData() {
  const [language, setLanguage] = useState('EN');
  // ... 原有代码
  {showImage && <ImgSwitch filesData={filesData} language={language} />}
}

// 方式2：从上层组件接收language props
function ImgData({ language }) {
  // ... 原有代码
  {showImage && <ImgSwitch filesData={filesData} language={language} />}
}

2. 移除文件名中的路径前缀

修改ImgData中handleFileSelect的文件名处理逻辑，保留原始文件名：

const filesWithNewPath = Array.from(selectedFiles).map(file => {
  // 直接使用原始文件名，避免添加路径前缀
  return new File([file], file.name, { type: file.type });
});

若需记录文件存储路径，可单独添加字段，而非修改File对象的name：

const filesWithNewPath = Array.from(selectedFiles).map(file => ({
  file: file,
  storagePath: `../img/${file.name}`,
  name: file.name
}));

同时调整ImgSwitch逻辑，使用fileData.name匹配前缀，fileData.file创建Object URL。

3. 优化筛选逻辑健壮性

在ImgSwitch的useEffect中增加前置判断，避免undefined导致的错误：

useEffect(() => {
  if (!language || !filesData.length) {
    setDisplayImage(null);
    return;
  }
  // ... 原有筛选逻辑
}, [filesData, language]);

统一大小写匹配规则，避免大小写不一致导致的匹配失败：

const langPrefix = `${language.toUpperCase()}-`;
const fallbackLangPrefix = 'EN-';
if (name.toUpperCase().startsWith(langPrefix)) {
  // ... 匹配逻辑
}

额外排查步骤 #

• 在ImgSwitch的useEffect中添加console.log('当前language:', language)，确认语言参数是否正确传递。
• 打印filesData中每个元素的name属性，验证文件名是否被错误修改。
• 手动传入固定language值（如language="EN"），测试筛选逻辑本身是否正常。

内容的提问来源于stack exchange，提问作者nuno rocha