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

我有一个从data.json文件中读取所有信息的应用程序。我导入文件并通过道具传递到组件

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

现在我有了一个从“./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;

import React，{Component}来自'React'；
从“/MyComponent”导入MyComponent；
从“./AnotherComponent”导入另一个组件；
从“./data/data.json”导入数据；
从“/data/data en.json”导入英语；
从“/data/data pt.json”导入葡萄牙语；
类MyApp扩展组件{
建造师（道具）{
超级（道具）；
this.state={istogleon: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=>({
资料：英文
}))
}否则{
this.setState（state=>({
资料来源：葡萄牙语
}))
}
console.log（数据）
}
render（）{
返回(
{this.state.isToggleOn？'en'：'pt'}
);
}
}
导出默认MyApp；

如何更改我的数据

---

谢谢

设置状态是不同步的，因此在您的

handleClick

中，您应该使用回调来获得新状态并执行您的操作：

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

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

改变

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

到

---

这里有更多关于

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 };

到

---

这里有更多关于

setState

的信息：

我修复了我的问题，只需在我的组件中放入

这个.state.

：

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

---

无论如何，非常感谢。

我修复了我的问题，只需在我的组件中放入此.state。：

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

---

无论如何，非常感谢。

你好，古斯塔沃，小心点，因为您在构造函数中为

分配了两次。请在构造函数中声明
@格拉马提克是的，我从开发世界开始。感谢您的建议。您好Gustavo，请小心，因为您在构造函数中为该
赋值了两次。state
@格拉马提克是的，我从开发世界开始。谢谢你的建议。我修复了我的问题，只需在我的组件中放入
这个.state。
无论如何，非常感谢。我修复了我的问题，只需在我的组件中放入
这个.state。
无论如何，非常感谢。