Question

我是新手，无法将数据从父组件传递到子组件。这是我的父组件。我将我的子组件包含在映射中。因此，每次都应该通过传递我在子组件中需要的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>

子组件

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

Answer 1

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

Answer 2

在父母：

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

Answer 3

首先你说I included my child component in the mapping.

然后使用以下。

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

其次，提取componentWillMount并不是您最好的选择，而是使用componentDidMount和提取的参数名称应为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);
        }
    );
}

Answer 4

将componentWillMount更改为componentDidMount
console.log添加到setstate回调函数
console.loged api call的返回。

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

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

传递状态和道具时出错

4 个答案: