在没有 Redux 的情况下使用 React 切换语言

Question

我正在尝试在 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;

除了div 和className="desc" 之外，一切都有效。 desc 总是落后一个阶段。我的意思是当state.lang 是en 时，它会在hi 中显示文本，反之亦然。

我刚开始学习 React，所以代码很乱。对此感到抱歉。

谢谢。

Answer 1

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

1. State updates are asynchronous。这意味着this.state 在this.setState 调用后不会立即获得更新的状态。

2. 由于状态更新是异步的，如果您基于现有状态（在一些地方，包括 switchLanguage）设置状态，您必须使用setState 您将回调传递给，而不是您将对象传递给的版本；在回调中，使用回调接收到的最新状态对象作为参数。

3. 当您执行this.setState({/*...*/desc: this.convertCode(/*...*/)}) 时，您调用convertCode 之前 调用setState，并将其返回值传递给setState 作为属性上的值对象你正在传递它。所以即使不是上面的问题#2，它仍然会有一个基本的控制流问题，convertCode 仍然会看到即将过期的this.state.lang。

解决所有这些问题的最佳方法可能是更新convertCode 以选择接受lang 以使用（默认为this.state.lang）：

convertCode = (givenCode, lang = this.state.lang) => {
    // ...use `lang`, not `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
        });
      });
  }

this.state.code 还没有更新，因为状态更新是异步的。另外，我们要使用this.state.lang，所以我们需要使用回调形式。相反，结合这两个调用并将语言传递给convertCode：

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

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

// INCORRECT:
//   A) Sets state based on state without callback
//   B) Calls `convertCode` before `setState`
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 来解决这两个问题：

// 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 传递给this.convertCode。

Answer 2

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

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

然后在您的switchLanguage 方法中：

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

编辑：首选 setState 的功能版本以避免在this.state.code 更新时出现不一致：

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