时间戳

首页 > 解决方案 > 如何选择不同的json文件进行循环？

javascript - 如何选择不同的json文件进行循环？

问题描述

我是新来的反应。我编写了一个脚本来循环一个 json 文件（../a.json）以在屏幕上显示城市。在a.json里面，是英国的城市信息列表。

如：[“Avon”、“Bedfordshire”……“Tyrone”]

代码将循环这个 json 文件并在屏幕上显示每个城市。现在我想添加一个参数让人们选择显示哪个国家。我添加了另外 4 个 json 文件，

从“../b.json”导入 b；

从“../d.json”导入 d；

从“../e.json”导入 e；

从“../f.json”导入 f；

我也创建了枚举类型Locale，但不知道如何调整代码文件3中的代码。你能帮忙看看吗？

我可以在代码文件 3 中创建一个 Map，并且根据从 Home 传递的语言环境，我可以提供 json 文件。它有效吗？我应该如何调整代码？

Code file 1



Code file 3

标签： javascriptreactjstypescriptfrontend

解决方案

您可以执行类似以下代码的操作。在一个对象中添加所有本地人。然后选择更新localData的onChange。

import React from "react";
import ES from "../data/ES.json";
import IT from "../data/IT.json";
import UK from "../data/UK.json";

const locals = {
  UK: UK,
  ES: ES,
  IT: IT
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      index: 0,
      selectedLocal: "UK",
      localData: locals["UK"]
    };
  }

  onChange = e => {
    this.setState({
      index: 0,
      localData: locals[e.target.value],
      selectedLocal: e.target.value
    });
  };

  render() {
    return (
      <div>
        <select value={this.state.selectedLocal} onChange={this.onChange}>
          {Object.keys(locals).map(local => {
            return <option value={local}>{local}</option>;
          })}
        </select>
        <div className="hints-on-home-screen">
          <div
            style={{
              fontSize: this.props.testFontSize
            }}
          >
            {this.state.localData[this.state.index]}
          </div>
        </div>
      </div>
    );
  }
}

推荐阅读