传递状态和道具时出错
传递状态和道具时出错
提问于 2018-06-10 03:01:04
我是新的反应，无法传递数据从父组件到子组件。这是我的父组件。我在映射中包括了我的子组件。因此，每次都应该通过传递user.login来调用它，这是我在子组件中需要的，以获取github以供重新部署。
const users = this.props.userList.map((user) => (
<div className="container">
<div className="jumbotron container" key={user.login}>
<div className="row">
<div className="col-sm-3">
<img src={user.avatar_url}
className="rounded-circle" alt="Cinque Terre" />
</div>
<div className="col-sm-6">
<h3> {user.login}</h3>
<p> Profile URL : {user.html_url} </p>
<p> Score : {user.score} </p>
<p> Type : {user.type}</p>
</div>
</div>
<div className="row pull-right">
<div className="col-12">
<button type="button" className="btn btn-primary btn-outline btn-lg"
data-toggle="collapse" data-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample" value={user.login}
id="b1" onclick={this.callUser.bind(this)} >Details</button>
</div>
</div>
</div>
<div className="collapse" id="collapseExample">
<UserRepo repoCall={this.props.user.login}/>
</div>
</div>子组件
class UserRepo extends Component {
constructor(props) {
super(props)
this.state = { repoCall: [] }
}
componentWillMount() {
console.log('Repo-----------')
fetch('https://api.github.com/users/'+this.props.repoCall.login+'/repos')
.then(res => res.json())
.then(
user => {
this.setState({
repoCall :repoCall
});
console.log('here is repo' + repoCall);
}
);
}
}回答 4
Stack Overflow用户
发布于 2018-06-10 03:17:30
this.props.repoCall.login或this.props.repoCall
您将repoCall作为this.props.user.login，我假设它返回用户名。因此，在您的获取中，您使用的是不存在的：repoCall.login
试着把它取为：
fetch('https://api.github.com/users/'+this.props.repoCall+'/repos')看来你的setState不对。您正在使用user，但试图使用repoCall设置状态。
componentDidMount() {
fetch(`https://api.github.com/users/${this.props.repoCall}/repos`)
.then(res => res.json())
.then(repoCall => this.setState({repoCall}));
}Stack Overflow用户
发布于 2018-06-10 03:25:50
在父母中：
<div className="collapse" id="collapseExample">
<UserRepo repoCall={user.login}/>
</div>在儿童方面：
componentWillMount(){
console.log('Repo-----------')
fetch('https://api.github.com/users/'+this.props.repoCall+'/repos')
.then(res => res.json())
.then(
user => {
this.setState({
repoCall :repoCall// not sure what is going on here mb user.repoCall?
});
console.log('here is repo' + repoCall);
}
);
}Stack Overflow用户
发布于 2018-06-10 03:34:09
首先你说的是I included my child component in the mapping.
那就用下面的。
<div className="collapse" id="collapseExample">
<UserRepo repoCall={user.login} />
</div>其次，获取componentWillMount不是最好的选择，而是使用componentDidMount和param名称来获取应该是this.props.repoCall
componentDidMount(){
console.log('Repo-----------')
fetch('https://api.github.com/users/'+this.props.repoCall+'/repos')
.then(res => res.json())
.then(
repoCall => {
this.setState({
repoCall
});
console.log('here is repo' + this.state.repoCall);
}
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50780218
复制相关文章
相似问题
腾讯云开发者
