組件狀態的var在外部更改后消失

Question

1. redux存儲語言的語言環境
2. 轉換器組件通過鍵從const獲取轉換，並將其保存到自己的狀態。 並返回span中當前語言的翻譯
3. 我試圖使用該庫https://www.npmjs.com/package/baffle以獲得奇特效果。
4. 僅在翻譯組件中使用純文本，一切都可以正常工作。 但是當文本取決於狀態時，文本就會消失。 不知道我是否解釋正確，所以有一個小例子。 任何文本-有效的{this.state.etc}-不

Translate.jsx

import { TRANSLATIONS } from './../../constants/translations';

class Translate extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      translations: {},
    }
  }

  componentDidMount() {
    const translationKeys = this.props.translationKey.split('.');
    let translation = TRANSLATIONS;

    translationKeys.forEach((i) => {
      translation = translation[i]
    });

    this.setState((state) => ({
      translations: translation,
    }));
  }

  render() {
    return (
      <span ref={this.props.translateRef}>{this.state.translations[this.props.locale]}</span>
    )
  }
}


Translate.propTypes = {
  locale        : PropTypes.string.isRequired,
  translationKey: PropTypes.string.isRequired,
}

export default Translate;

TranslateContainer.js

const mapStateToProps = state => ({
  locale: state.locale,
})

export default connect(mapStateToProps, null, null, {forwardRef: true})(Translate);

和即時通訊在react-router-dom自定義鏈接中使用此組件

import { Route, Link } from 'react-router-dom';
import classNames from 'classnames';
import baffle from 'baffle';

import css from './RouteLink.module.css';

import Translate from '../Translations/TranslateContainer';

class RouteLink extends React.Component {
  constructor(props) {
    super(props);

    this.baffleRef = React.createRef();

    this._onMouseEnter = this._onMouseEnter.bind(this);
  }

  componentDidMount() {
    this.baffle = baffle(this.baffleRef.current);
  };

  _onMouseEnter() {
    this.baffle.start();
  }

  render() {
    return (
      <Route
      path={this.props.to}
      exact={this.props.active}
      children={({ match }) => (
        <Link
        to={this.props.to}
        className={classNames({
          [css.link]: true,
          [css.active]: match,
        })}
      onMouseEnter={this._onMouseEnter}
        >
          <Translate
          translationKey={this.props.label}
          translateRef={this.baffleRef}/>
        </Link>
      )}
      />
    );
  }
}

RouteLink.propTypes = {
  to    : PropTypes.string.isRequired,
  label : PropTypes.string.isRequired,
  active: PropTypes.bool,
}

export default RouteLink;

translations.js

export const TRANSLATIONS = {
  navBar: {
    home: {
      ru_RU: 'Главная',
      en_EN: 'Home',
    },
  },
}

有沒有什么辦法解決這一問題？ 翻譯效果很好，切換語言效果很好。 鏈接有效。 如果翻譯器返回跨度而沒有狀態，那么即使是折流板也可以工作。 但是如果翻譯器返回的文本取決於狀態，則當擋板啟動任何功能時，文本只會消失

Answer 1

I don't see the need for the forEach loop in componentDidMount.

The line below will return an array of 2 elements ['navbar','home']

const [firstLevel,secondLevel] = this.props.translationKey.split('.') // array destructuring to get the two values

You could just use the values in the array and locale props to set your translation state.

this.setState({translations: TRANSLATIONS[firstLevel][secondLevel][this.props.locale]})

然后在渲染中，只需使用您的狀態

<span ref={this.props.translateRef}>{this.state.translations}</span>

這可以解決問題，但作為一個補充，您可以拆分props.translationKey並遍歷TRANSLATIONS對象，甚至在render內，也可以遍歷TRANSLATIONS對象，而不是componentDidMount。您不需要狀態，因為您似乎沒有事件處理程序再次設置。