Question

我有一个应用程序，可从data.json文件中读取所有信息。我导入文件并通过prop传递给组件。

我正在尝试更改语言，更改data.json导入路径。

现在我有一个import data from './data/data.json'，但是我想有两种语言。然后，我翻译了data.json并创建了另外两个数据文件./data/data-en.json和./data/data-pt.json。

并制作了一个在pt和en之间切换的按钮。

当我单击按钮时，没有任何作用。

import React, { Component } from 'react';
import MyComponent from './MyComponent';
import AnotherComponent from './AnotherComponent';

import data from './data/data.json';
import english from './data/data-en.json';
import portuguese from './data/data-pt.json';

class MyApp extends Component {

  constructor(props) {
    super(props);
    this.state = { isToggleOn: true };
    this.state = { data: english };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
    if (this.state.isToggleOn) {
      this.setState(state => ({
        data: english
      }))
    } else {
      this.setState(state => ({
        data: portuguese
      }))
    }
    console.log(data)
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          {this.state.isToggleOn ? 'en' : 'pt'}
        </button>
        <MyComponent data={data.mycomponent} />
        <AnotherComponent data={data.anothercomponent} />
      </div>
    );
  }
}

export default MyApp;

如何更改我的数据？

谢谢

Answer 1

setState是不同步的，因此在您的handleClick中，您应该使用回调函数来设置新状态并执行以下操作：

handleClick() {
  this.setState(state => ({
    isToggleOn: !state.isToggleOn,
    data: state.isToggleOn ? portuguese : english,
  }));
  console.log(data);
}

也不需要在构造函数中初始化两次状态

更改

this.state = { isToggleOn: true };
this.state = { data: english };

收件人

this.state = {
  isToggleOn: true,
  data: english
}

有关setState的更多信息：https://reactjs.org/docs/state-and-lifecycle.html

Answer 2

我仅将this.state.放入组件中就解决了问题：

<MyComponent data={this.state.data.mycomponent} />
<AnotherComponent data={this.state.data.anothercomponent} />

无论如何，非常感谢。

为什么单击按钮后我的数据文件无法更改？

2 个答案: