反应-在组件之间传递数据 [英] React - passing data between components
问题描述
这是我第一次尝试一个简单的React应用程序。使用Openweather API和AXIOS。我参加了Stephen Grider关于Udemy的课程，并且现在尝试自己创建一些东西，但是在组件之间传递数据时仍然遇到问题。我有一个SearchBar组件，并且希望能够将输入值传递给父组件的状态，因此我可以在每次搜索时对其进行更新并将其呈现到DOM中。但是，我一直遇到错误。我尝试将函数作为道具传递给我的SearchBar组件，但出现错误：
This is my first try at a simple React application. Working with the Openweather API and AXIOS. I took Stephen Grider's course on Udemy and I'm trying to create something on my own now, but I still have problems when passing data between components. I have a SearchBar component and I'd love to be able to pass the input value to the parent component's state, so I can then update it with each search and render it into the DOM. However, I keep running into errors. I tried passing a function as a prop to my SearchBar component but I'm getting errors:
setState（...）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是无人值守。请检查App组件的代码。
setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the App component.
未定义citySearch
citySearch is not defined
这让我感到困惑，因为我试图复制课程中的确切步骤，但似乎效果很好。但是，我对此还很陌生，所以可能只是我犯了一些菜鸟错误。任何提示将不胜感激。
This is confusing to me, as I tried to copy the exact steps from the course, where it seems to be working just fine. But again, I'm very new to this so it is probably just me making some sort of a rookie mistake. Any tips would be much appreciated.
在下面检查我的代码：
App.js
import React, { Component } from 'react';
import './App.css';
//Libraries
import axios from 'axios';
//Components
import SearchBar from './Components/search-bar';
class App extends Component {
constructor(props){
super(props);
this.state = {
city: 'London',
country: 'uk',
temperature: 0,
humidity: 0,
pressure: 0
}
//Axios call
let city = this.state.city;
let country = this.state.country;
axios
.get(`http://api.openweathermap.org/data/2.5/weather?APPID=${API_KEY}&q=${city},${country}`)
.then(function(response) {
this.setState({
city: response.data.name,
country: response.data.name,
temperature: response.data.main.temp,
humidity: response.data.main.humidity,
pressure: response.data.main.pressure
});
}.bind(this))
.catch(function(error) {
console.log(error);
});
this.citySearch('London');
}
citySearch(city){
this.setState({city})
}
render() {
return (
<div className="container">
<h1 className="display-1 text-center">Weather App</h1>
<SearchBar onSearchTermChange={citySearch} />
</div>
);
}
}
export default App;
SearchBar组件：
SearchBar component:
import React, { Component } from 'react';
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = {
city: ""
};
}
render() {
return (
<input
value={this.state.city}
onChange={this.onHandleChange}
className="form-control mt-3"
placeholder="Enter a city name..."
type="text"
/>
);
}
onHandleChange(city) {
this.setState({ city });
this.props.onSearchTermChange(city);
}
}
export default SearchBar;
推荐答案
setState（。 。）：只能更新已安装或正在安装的组件。
通常意味着您在未安装的组件上调用了setState（）。这是
的无人值守。请检查App组件的代码。
setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the App component.
这是由于您的 axios 在构造函数中调用。将您的axios调用放入 componentDidMount 应该可以解决
This is because of your axios call inside the constructor. Put your axios call in componentDidMount should resolve it
citySearch未定义
citySearch is not defined
这是因为React无法找到 citySearch 函数。您应该更改
It is because React cannot find citySearch function. You should change
< SearchBar onSearchTermChange = {citySearch} />
到
< SearchBar onSearchTermChange = {this.citySearch} />
要以这种方式使用 citySearch ，还应该绑定 citySearch 在您的构造函数中
In order to use citySearch this way, you should also bind citySearch in your constructor
摘要：
import React, { Component } from 'react';
import './App.css';
//Libraries
import axios from 'axios';
//Components
import SearchBar from './Components/search-bar';
class App extends Component {
constructor(props){
super(props);
this.state = {
city: 'London',
country: 'uk',
temperature: 0,
humidity: 0,
pressure: 0
}
this.citySearch = this.citySearch.bind(this)
}
componentDidMount() {
//Axios call
let city = this.state.city;
let country = this.state.country;
axios
.get(`http://api.openweathermap.org/data/2.5/weather?APPID=${API_KEY}&q=${city},${country}`)
.then(function(response) {
this.setState({
city: response.data.name,
country: response.data.name,
temperature: response.data.main.temp,
humidity: response.data.main.humidity,
pressure: response.data.main.pressure
});
}.bind(this))
.catch(function(error) {
console.log(error);
});
}
citySearch(city){
this.setState({city})
}
render() {
return (
<div className="container">
<h1 className="display-1 text-center">Weather App</h1>
<SearchBar onSearchTermChange={this.citySearch} />
</div>
);
}
}
export default App;
不要调用 setState 在您的构造函数中，您可以像初始化一样初始化状态。因此，应删除构造函数中原始的 setState 。
Don't call setState in your constructor, you can just initialize your state like your did. So the original setState in your constructor should be deleted.
更新
每次调用 citySearch 再次搜索。
import React, { Component } from 'react';
import './App.css';
//Libraries
import axios from 'axios';
//Components
import SearchBar from './Components/search-bar';
class App extends Component {
constructor(props){
super(props);
this.state = {
city: 'London',
country: 'uk',
temperature: 0,
humidity: 0,
pressure: 0
}
this.citySearch = this.citySearch.bind(this)
}
componentDidMount() {
axioSearch();
}
axioSearch(city) {
let city = city || this.state.city;
let country = this.state.country;
axios
.get(`http://api.openweathermap.org/data/2.5/weather?APPID=${API_KEY}&q=${city},${country}`)
.then(function(response) {
this.setState({
city: response.data.name,
country: response.data.name,
temperature: response.data.main.temp,
humidity: response.data.main.humidity,
pressure: response.data.main.pressure
});
}.bind(this))
.catch(function(error) {
console.log(error);
});
}
citySearch(city){
this.axioSearch(city);
}
render() {
return (
<div className="container">
<h1 className="display-1 text-center">Weather App</h1>
<SearchBar onSearchTermChange={this.citySearch} />
</div>
);
}
}
export default App;
这篇关于反应-在组件之间传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
