Javascript 使用React而不使用Redux切换语言

我正在尝试在React中创建天气应用程序。我想使用

onClick

切换应用程序语言

这是到目前为止我的代码

import React, { Component } from "react";
import axios from "axios";
import "./App.css";

class App extends Component {

componentDidMount() {
    this.setState({
      isLoading: true
    });
    axios
      .get("path to weather api")
      .then(res => {
        console.log(res.data.data[0]);
        const { city_name, temp, weather } = res.data.data[0];
        this.setState({
          loc: city_name,
          temp: temp,
          code: weather.code,
          isLoading: false
        });
        this.setState({
          desc: this.convertCode(this.state.code)
        });
      });
  }

switchLanguage = () => {
    if (this.state.lang === "en") {
      this.setState({
        lang: "hi",
        desc: this.convertCode(this.state.code)
      });
    } else {
      this.setState({
        lang: "en",
        desc: this.convertCode(this.state.code)
      });
    }
  };

convertCode = givenCode => {
    if (this.state.lang === "en") {
      if (
        givenCode === 200 ||
        givenCode === 201 ||
        givenCode === 202 ||
        givenCode === 230 ||
        givenCode === 231 ||
        givenCode === 232 ||
        givenCode === 233 ||
        givenCode === "200" ||
        givenCode === "201" ||
        givenCode === "202" ||
        givenCode === "230" ||
        givenCode === "231" ||
        givenCode === "232" ||
        givenCode === "233"
      ) {
        return "Thunderstorms";
      } else if (
        givenCode === 300 ||
        givenCode === 301 ||
        givenCode === 302 ||
        givenCode === "300" ||
        givenCode === "301" ||
        givenCode === "302"
      ) {
        return "Drizzle";
      }
      ..............
      ..............
      IF CONDITION FOR THE OTHER LANGUAGE
  };

render() {
    if (!this.state.isLoading) {
      return (
        <div className="App">
          <div className="container">
            <div className="languageSwitcher">
              <i className="fa fa-language" onClick={this.switchLanguage} />
            </div>
            <div className="location">
              <i className="fa fa-location-arrow" /> {this.state.loc}
            </div>
            {this.state.lang === "en" && (
              <div className="temperature">It's {this.state.temp} degrees.</div>
            )}
            {this.state.lang === "hi" && (
              <div className="temperature">
                तापमान {this.state.temp} डिग्री है।
              </div>
            )}
            <div className="description">{this.state.desc}</div>
          </div>
        </div>
      );
    } else {
      return <div className="loading">Fetching weather data...</div>;
    }
  }
}

export default App;

import React，{Component}来自“React”；
从“axios”导入axios；
导入“/App.css”；
类应用程序扩展组件{
componentDidMount（）{
这是我的国家({
孤岛加载：正确
});
axios
.get（“天气api路径”）
。然后（res=>{
console.log（res.data.data[0]）；
const{city_name，temp，weather}=res.data.data[0]；
这是我的国家({
地点：城市名称，
临时工：临时工，
代码：weather.code，
孤岛加载：false
});
这是我的国家({
desc:this.convertCode（this.state.code）
});
});
}
switchLanguage=（）=>{
如果（this.state.lang==“en”）{
这是我的国家({
朗：“你好”，
desc:this.convertCode（this.state.code）
});
}否则{
这是我的国家({
朗：“嗯，
desc:this.convertCode（this.state.code）
});
}
};
convertCode=givenCode=>{
如果（this.state.lang==“en”）{
如果(
给定代码===200||
给定代码===201||
给定代码===202||
给定代码===230||
给定代码===231||
给定代码===232||
给定代码===233||
给定代码==“200”||
givenCode==“201”||
给定代码==“202”||
givenCode==“230”||
givenCode==“231”||
给定代码==“232”||
givenCode==“233”
) {
返回“雷雨”；
}否则如果(
给定代码===300||
给定代码===301||
给定代码===302||
givenCode==“300”||
givenCode==“301”||
givenCode==“302”
) {
返回“毛毛雨”；
}
..............
..............
另一种语言的IF条件
};
render（）{
如果（！this.state.isLoading）{
返回(
{this.state.loc}
{this.state.lang==“en”&&(
这是{this.state.temp}度。
)}
{this.state.lang==“hi”&&(
तापमान {this.state.temp}डिग्री है।
)}
{this.state.desc}
);
}否则{
返回获取天气数据。。。；
}
}
}
导出默认应用程序；

除了带有

className=“desc”

的

div

总是落后一个阶段之外，其他一切都正常工作。我的意思是当

state.lang

为

en

时，它会在

hi

中显示文本，反之亦然

我刚开始学习React，所以代码很混乱。很抱歉

---

谢谢。

您有两个状态管理问题和一个执行流问题，其中一个（或可能更多）导致您提到的行为（但在任何情况下都需要修复）：

。这意味着

This.state

在调用

This.setState

后，不会立即具有更新的状态

因为状态更新是异步的，如果您是基于现有状态设置状态（您在一些地方，包括

switchLanguage

），则必须使用回调传递到的

setState

版本，而不是对象传递到的版本；在回调中，使用回调接收到的最新状态对象作为参数

当您执行

this.setState（{/*…*/desc:this.convertCode（/*…*/）}）时

，在调用

setState

之前调用

convertCode

，并将其返回值作为传递对象上属性的值传递到

setState

。因此，即使它不是上面的问题2，它仍然会有一个基本的控制流问题，

convertCode

我看到这个.state.lang即将过时

this.state.lang

解决所有这些问题的最佳方法可能是更新

convertCode

以选择性地接受要使用的

lang

（默认为

this.state.lang

）：

…然后解决设置状态和使用

convertCode

的各种问题。第一个是在

componentDidMount

中：

componentDidMount() {
    this.setState({
      isLoading: true
    });
    axios
      .get("path to weather api")
      .then(res => {
        console.log(res.data.data[0]);
        const { city_name, temp, weather } = res.data.data[0];
        this.setState({
          loc: city_name,
          temp: temp,
          code: weather.code,
          isLoading: false
        });
        this.setState({
          desc: this.convertCode(this.state.code) // <=== Error is here
        });
      });
  }

在

switchLanguage

中，问题2和问题3都存在：

我们可以通过使用回调表单并将要使用的语言传递到

convertCode

中来解决这两个问题：

        this.setState(prevState => ({
          loc: city_name,
          temp: temp,
          code: weather.code,
          isLoading: false,
          desc: this.convertCode(weather.code, prevState.lang),
        }));

// Uses callback when setting state based on state
switchLanguage = () => {
    this.setState(prevState => {
      const lang = prevState.lang === "en" ? "hi": "en";
      return {lang, desc: this.convertCode(prevState.code, lang)};
    });
  };

---

请注意，

prevState

用于

lang

检查和将

code

传递给

此方法。convertCode

如果在

convertCode

方法中使用以前的lang状态，则可以将新的lang传递给它：

convertCode = (givenCode, lang) => {
    if (lang === "en") {
        ...

然后在您的

switchLanguage

方法中：

this.setState({
        lang: "hi",
        desc: this.convertCode(this.state.code, "hi")
      });

编辑：首选setState的功能版本，以避免在

此.state.code

更新时出现不一致：

this.setState(prevState => ({
        lang: "hi",
        desc: this.convertCode(prevState.code, "hi")
      }));

---

你的意思是你需要点击

onClick

两次它才能工作？@KuchBhi我想他的意思是如果语言是印地语，那么描述就用英语，而如果语言是英语，那么描述就用印地语。看看这是否有帮助：是的@SivcanSingh是对的。应用程序默认加载

en

。所以当我

onClick

有一次，语言应该改为

hi

，除了

desc

之外的所有元素都会这样。如果

hi

一切都变成

hi

，但是

desc

变成

en

。如果不清楚，我很抱歉。@sequel检查这篇文章：我认为我们可以相信

这个的值。state.code

在这种情况下，因为它无法通过语言开关批量更新。我同意，但我不认为每个人都必须盲目遵守这一规则，因为它可以防止批量

this.setState({
        lang: "hi",
        desc: this.convertCode(this.state.code, "hi")
      });

this.setState(prevState => ({
        lang: "hi",
        desc: this.convertCode(prevState.code, "hi")
      }));