Reactjs 传递状态和道具时出错

我是新手，无法将数据从父组件传递到子组件。这是我的父组件。我在映射中包含了我的子组件。所以每次都应该通过传递

user.login

来调用它，我需要在子组件中使用它来获取用于repos的github api

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>

---

this.props.repoCall.login

或

this.props.repoCall

您得到的repoCall是this.props.user.login，我假设它返回username。因此，在获取中，您使用的是不存在的：

repoCall.login

尝试以下方式获取：

fetch('https://api.github.com/users/'+this.props.repoCall+'/repos')

看来你的状态不对。您正在使用

user

，但正在尝试使用

repoCall

设置状态

componentDidMount() {
    fetch(`https://api.github.com/users/${this.props.repoCall}/repos`)
      .then(res => res.json())
      .then(repoCall => this.setState({repoCall}));
  }

在父项中：

<div className="collapse" id="collapseExample">                                  
       <UserRepo repoCall={user.login}/>
</div>

---

首先，您说

我在映射中包含了我的子组件。

然后使用以下命令

<div className="collapse" id="collapseExample">                                  
  <UserRepo repoCall={user.login} />
</div>

已更改的componentWillMount到componentDidMount

console.log添加到setstate回调函数中

console.log记录了api调用的返回

尝试更改您的子组件，如下面的代码段所示，并检查控制台

class UserRepo extends Component {
constructor(props){
    super(props)
    this.state ={  repoCall: []}

}

componentDidMount(){
    console.log('Repo-----------')
    fetch('https://api.github.com/users/'+this.props.repoCall.login+'/repos')
    .then(res => res.json())
    .then(
        repoCall=> {
            this.setState({repoCall :repoCall},()=>console.log('here is repo' +  this.state.repoCall));
        }
    );
}

---

componentDidMount（）{console.log（'--------------repo----'）获取（

https://api.github.com/users/${this.props.repoCall}/repos

）.then（res=>res.json（））.then（repoCall=>this.setState（{repoCall}）//console.log（repoCall））；console.log（repoCall）console.log（'----rrr----repo----'）由于控制台上未定义repoCall，我收到错误消息。repoCall处的日志（repoCall）：user.repoCall我收到的repoCall未定义我不确定您在那里尝试做什么，您希望从fetch返回什么，以及您希望处于什么状态？在我的子组件中，我希望获得追随者、追随者、存储库、，使用登录语言，即来自父级的用户名，我在我的子组件中获取github特定的用户信息。现在的情况是，您必须通过

user

json对象提取所需的字段，将它们放入临时数组，然后调用set staterender（）{return（数据标签：{repoCall.followers}数据标签）}现在我正在尝试显示追随者。我在repoCall中没有定义repoCall。followers您确定在父映射中

用户

也包含追随者。您可以发布一点JSON。在父Im中用于用户搜索在子Im中使用dat登录获取追随者，在fetch（'）中跟踪，repo

<div className="collapse" id="collapseExample">                                  
  <UserRepo repoCall={user.login} />
</div>

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);
        }
    );
}

class UserRepo extends Component {
constructor(props){
    super(props)
    this.state ={  repoCall: []}

}

componentDidMount(){
    console.log('Repo-----------')
    fetch('https://api.github.com/users/'+this.props.repoCall.login+'/repos')
    .then(res => res.json())
    .then(
        repoCall=> {
            this.setState({repoCall :repoCall},()=>console.log('here is repo' +  this.state.repoCall));
        }
    );
}