Question

我是React的新手，正在使用Open Weather Map API创建一个应用程序，当用户键入位置并单击“查找”按钮时，便会获取JSON文件，并在UI上正确呈现了该文件。但是问题是，当用户获取有关某个位置的数据时，如果他们键入另一个位置，则UI与第一个位置的呈现数据保持相同。这是我正在使用的代码：

import React, { Fragment, Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import SearchBox from "./Containers/SearchBox/SearchBox";
import Header from "./Components/Header/Header";
import styles from "./App.module.css";
import CardContainer from "./Containers/CardContainer/CardContainer";
import axios from "axios";
class App extends Component {
  state = {
    title: []
  };

  getTitle(title) {
    axios
      .get(
        `http://api.openweathermap.org/data/2.5/forecast?q=${title}&APPID=7ad09d078633b652ecef8587a337639e&units=metric`
      )
      .then(res => {
        this.setState(prevState => ({
          title: [...prevState.title, res.data.city.name]
        }));
        this.setState(prevState => ({
          title: [...prevState.title, res.data.list]
        }));
      });
  }

  render() {
    return (
      <div className="App">
        <Fragment>
          <Header title={"Weather App"} />
          <div className="container">
            <SearchBox getRequest={this.getTitle.bind(this)} />
          </div>
          <h1 className={styles.cityWeather}>{this.state.title[0]}</h1>
          <CardContainer weatherData={this.state.title[1]} />
        </Fragment>
      </div>
    );
  }
}

export default App;


import React, { Component } from "react";
import styles from "./SearchBox.module.css";
class SearchBox extends Component {
  state = { title: "" };

  change(e) {
    this.setState({ title: e.target.value });
  }

  submit(e) {
    e.preventDefault();
    this.props.getRequest(this.state.title);
  }

  render() {
    return (
      <form
        onSubmit={this.submit.bind(this)}
        className={styles.form}
        action="/"
        method="get"
      >
        <input
          onChange={this.change.bind(this)}
          className="form-control"
          placeholder="Enter your location"
          type="text"
          value={this.state.title}
          name="city"
          id=""
        />
        <div className={styles.buttonWrap}>
          <button className={`btn btn-primary ${styles.button}`} type="submit">
            Find
          </button>
        </div>
      </form>
    );
  }
}

export default SearchBox;

Answer 1

我没有测试您的代码，但是似乎您可能正在使用与先前状态相同的值来重新设置您的状态。

如果您的状态发生变化，请重新渲染。如果您使用完全相同的值，不会重新渲染。

此帖子ReactJS - Does render get called any time "setState" is called?中有一些深入的解释。

用户第二次单击按钮时，不会在React中重新呈现UI

1 个答案: