所以我有一个父组件和子组件。
父级将搜索栏中输入的任何内容作为道具传递给子级。
然后应该执行 api fetch,我在控制台中看到了 fetch 对象。我在从父母那里设置孩子的状态时遇到困难。
任何提示将不胜感激,谢谢您并快乐编码:D
class HelloComponent extends React.Component {
render () {
return <h1>Github API repositories </h1>;
}
}
class Parent extends React.Component {
constructor (props) {
super (props);
this.boo = this.boo.bind(this);
this.state = {path: ''};
}
boo = (event) => {
event.preventDefault();
//alert('it works!');
let url = 'https://api.github.com/search/repositories?q='+ this.state.path;
//let parameter = this.state.path;
console.log(url);
我尝试使用 this.props 或只是 this.response..etc
axios.get(url)
.then(response => {
console.log(response.data.items)
this.setState({
repo : this.props.response.data.items
})
})
}
//set the state from the search bar
searchQuery = (event) => {
this.setState({ path : event.target.value });
}
render() {
return(
//call Repositories component and pass the current state as props
<div>
<form onSubmit={this.boo}>
<input type="text" onChange={this.searchQuery} />
<input type="submit" value="Search"/>
</form>
<Child search= {this.state.path} />
{/* <button onClick={this.boo}>fuck</button> */}
</div>
);
}
}
class Child extends React.Component {
constructor (props) {
super (props);
//this.boo = this.boo.bind(this);
this.state = { repo : ''};
}
render () {
{/*
const titles = this.state.repo.map( (repo) =>
<tr key={ repo.id }>
<td> { repo.name }</td>
<td><a href={repo.html_url}>{repo.html_url}</a></td>
</tr>
);
return (
<div>
<table>
<tbody>
<tr><th>Name</th><th>URL</th></tr>
{titles}
</tbody>
</table>
</div>
);
*/}
return (
<h1>{this.state.repo}</h1>
);
}
}
class App extends React.Component {
render () {
return (
<div>
<HelloComponent />
<Parent />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
我认为首先是你的这部分代码是错误的
axios.get(url)
.then(response => {
console.log(response.data.items)
this.setState({
repo : response.data.items
})
})
首先你需要将 prop repo 传递给 child
<Child repo={this.state.repo} search= {this.state.path} />
要从父级设置子级的状态,您不需要在父级中进行任何更改,添加 componentWillReceiveProps 方法并在那里设置状态
componentWillReceiveProps(nextProps) {
this.setState({
repo: nextProps.repo
})
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)