![](/img/trans.png)
[英]How do I rerender form value and state value when using hooks and state is changed in a different component in react
[英]How Do I Pass State (Value) when Calling Component in React?
我有一个React APP,它基于内置在代码中的``狗''查询从Flickr API完美显示图像-这是实现此目的的容器:
import React, { Component } from 'react';
import axios from 'axios';
import apiKey from './config.js';
import Navigation from './Navigation.js';
import Photos from './Photos.js';
import SearchBar from './SearchBar.js';
class Container extends Component {
constructor (){
super();
this.state = {
imgs:[],
query: '',
loading: true
}
}
componentDidMount() {
this.performSearch();
}
performSearch = (query = 'dogs') => {
axios.get(`https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&tags=${query}&per_page=24&format=json&nojsoncallback=1`)
.then(response => {
this.setState({
imgs: response.data.photos.photo,
loading: false
});
})
.catch(err => {
console.log('Error happened during fetching!', err);
});
}
render() {
return (
<div className="container">
<SearchBar onSearch={this.performSearch}/>
<Navigation />
{
(this.state.loading)
? <p>Loading....</p>
: <Photos data={this.state.imgs}/>
}
</div>
);
}
}
export default Container;
我有一个带有三个不同链接的导航栏-我想为每个链接调用Container组件-在API中传递查询的特定值。
因此,例如,如果我的链接是熊,猫和老鼠,我希望各个链接根据查询词生成正确的api。
我只是不确定如何使用容器组件传递查询词。 放轻松点,因为我有点新反应,但是我正在尝试类似
<Container query="bears" />
要么
<Container performSearch("bears") />
但我似乎无法弄清楚如何传递适当的值。
看起来您想作为一个查询传递查询。 首先,我将更新构造函数以接收props
,将它们传递给super()
,并使用它们来设置状态的query
属性的值:
constructor(props) {
super(props);
this.state = {
imgs: [],
query: this.props.query,
loading: true
}
}
接下来,更新performSearch()
方法以使用状态的query
属性,而不是硬编码的'dogs'
值:
performSearch = (query = this.state.query) => {
现在,您可以按照您的想法将适当的query
属性传递给Container
:
<Container query="bears" />
<Container query="cats" />
<Container query="mice" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.