我有一个应用程序可以从我的 data.json 文件中读取所有信息。我导入文件并将 props 传递给组件。
我正在尝试更改语言,更改我的 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;
如何更改我的数据?
谢谢
最佳答案
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
关于javascript - 为什么当我点击按钮时我的数据文件无法更改?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54256428/