React Context无法传递选中语言值的技术问题求助

问题根源 #

你的LanguageContext.Provider仅包裹了LanguageSwitcherx组件自身，而Newsitem组件不在该Provider的作用域内，因此无法获取到语言值。同时还存在导入路径错误、日志代码错误等细节问题。

修复步骤 #

1. 重构Context与状态管理

将语言状态和Context Provider提升到更高层级（如App.js），确保所有需要访问语言的组件都被Provider包裹：

创建独立Context文件：src/contexts/LanguageContext.js

import React, { createContext, useState } from 'react';

export const LanguageContext = createContext();

export const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = useState('en');

  return (
    <LanguageContext.Provider value={{ language, setLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
};

修改App.js，用Provider包裹所有组件：

import { LanguageProvider } from './contexts/LanguageContext';
import LanguageSwitcherx from './switch';
import Newsitem from './Newsitem';

function App() {
  return (
    <LanguageProvider>
      {/* 导航栏等其他组件 */}
      <LanguageSwitcherx />
      {/* 新闻列表容器，内部渲染Newsitem */}
      <div className="news-container">
        {/* 这里放置你的Newsitem列表渲染逻辑 */}
      </div>
    </LanguageProvider>
  );
}

export default App;

2. 调整switch.js的Context使用

import React, { useState, useContext } from 'react';
import '../index.css';
import { LanguageContext } from './contexts/LanguageContext';

const LanguageSwitcherx = () => {
  const { language, setLanguage } = useContext(LanguageContext);
  const languageOptions = [
    { label: 'ENGLISH', value: 'en' },
    { label: 'മലയാളം', value: 'ml' },
    { label: 'हिंदी', value: 'hi' },
    { label: 'Français', value: 'fr' },
  ];

  const handleLanguageChange = (event) => {
    const selectedLang = event.target.value;
    setLanguage(selectedLang);
    console.log('选中语言：', selectedLang); // 修正日志，打印选中值而非setter函数
  };

  const [showLanguageSwitcher, setShowLanguageSwitcher] = useState(false);

  const toggleLanguageSwitcher = () => {
    setShowLanguageSwitcher(!showLanguageSwitcher);
  };

  return (
    <div className="language-switcher">
      {showLanguageSwitcher ? (
        <div>
          <select value={language} onChange={handleLanguageChange}>
            {languageOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
          <button onClick={toggleLanguageSwitcher}>𝓁𝑔</button>
        </div>
      ) : (
        <button onClick={toggleLanguageSwitcher}>诶𝒜</button>
      )}
    </div>
  );
};

export default LanguageSwitcherx;

3. 修正Newsitem.js的导入与逻辑

import React, { useState, useEffect, useContext } from "react";
import translate from "translate";
// 修正导入路径，指向正确的Context文件
import { LanguageContext } from './contexts/LanguageContext';

const Newsitem = (props) => {
  const { title, description, imageUrl, newsUrl, date } = props;
  const [showDescription, setShowDescription] = useState(false);
  const [translatedTitle, setTranslatedTitle] = useState("");
  const [translatedDescription, setTranslatedDescription] = useState("");
  // 从Context获取当前语言
  const { language: selectedLanguage } = useContext(LanguageContext);

  useEffect(() => {
    console.log('当前语言：', selectedLanguage);
    const translateContent = async () => {
      try {
        const [transTitle, transDesc] = await Promise.all([
          translate(title, { to: selectedLanguage }),
          translate(description, { to: selectedLanguage }),
        ]);
        setTranslatedTitle(transTitle);
        setTranslatedDescription(transDesc);
      } catch (err) {
        console.error('翻译失败：', err);
        // 翻译失败时保留原内容
        setTranslatedTitle(title);
        setTranslatedDescription(description);
      }
    };
    translateContent();
  }, [title, description, selectedLanguage]);

  const handleReadMore = () => {
    setShowDescription(!showDescription);
  };

  return (
    <div className='my-3'>
      <div className='card' style={{ width: '18rem' }}>
        <img src={imageUrl} className='card-img-top' alt='新闻图片' />
        <div className='card-body'>
          <h5 className='card-title'>{translatedTitle || title}</h5>
          {showDescription && (
            <p className='card-text'>
              {translatedDescription || description}
            </p>
          )}
          <p className='card-text'>
            <small className='text-muted'>{date}</small>
          </p>
          <button
            className='btn btn-sm btn-dark'
            onClick={handleReadMore}
          >
            {showDescription ? 'Read Less' : 'Read More'}
          </button>
          <a
            rel='noreferrer'
            href={newsUrl}
            target='_blank'
            className='btn btn-sm btn-dark ms-2'
          >
            Read Full Article
          </a>
        </div>
      </div>
    </div>
  );
};

export default Newsitem;

额外注意事项 #

• 若translate库翻译失败，检查是否需要配置API密钥（部分翻译服务需要密钥）。
• React列表渲染时，key属性应放在循环的最外层元素上，而非组件props内。

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