Question

我正在进行api调用，该调用返回了一组用户名。我在Navbar组件中调用api，并将api返回的数据作为道具发送到另一个组件。当我在Navbar中使用console.log（this.state.Name）时，它将在控制台中提供具有用户名的整个数组，但是当我在其他SearchedUser componenet和console.log（）中接收到该数组时，收到的道具将为我提供未定义的控制台。任何人都可以告诉我什么地方错了。

----------------------------------导航栏组件----------- -----------------

     class Navbar extends Component{

     constructor(props){
    super(props);
    this.state={
        name:'',
        Name:[],
    }
     this.GetUserData=this.GetUserData.bind(this);
}

    GetUserData=()=>{
fetch(`http://localhost:4000/data/searchuser?Name=${this.state.name}`)
.then(response => response.json())
.then(data=> this.setState({Name:data.datad}))
.catch(err=>console.log(err));}

        render()
{
    console.log(this.state.Name);
    return(
        <Router>
          <Link to={'/SearchedUser'}> 
                <button type="submit" onClick={this.GetUserData}><i className="fa fa-search"></i></button>
         </Link>
            <Switch>
                <Route exact path='/' component={HomeContent} />
                <Route path='/Profile' component={Profile}/>
                <Route path='/SearchedUser' render={(props)=> <SearchedUser {...props} UserName={ [this.state.Name]}/>}/>
            </Switch>
        </Router>)  }}

-------------------------------- SearchedUser组件------------- -----------

    import React from 'react'
class SearchedUser extends React.Component{
constructor(props){
super(props);
this.state={
    Name: props.UserName
}
    }

    render(){
console.log(this.state.Name);
return(
    <div>         
    </div>
     )
    }
    }
export default SearchedUser;

Answer 1

可以尝试 console.log(this.props.UserName); 在 SearchedUser 组件的render()中。

因为您正尝试从构造函数中获取用户名，并且默认情况下，搜索组件将获得 null 值在props.username

中

props.username仅在收到获取响应后才会获得新值。

Answer 2

您可以尝试2种更改吗？

[this.state.Name]> this.state.Name，因为第一个输出具有单个条目的数组，例如['sara']：

<SearchedUser {...props} UserName={this.state.Name}/>}

另一件事，在NavBar组件的构造函数中：

 this.state={
        name:'',
        Name:'',
    }

Answer 3

使用componentWillReceiveProps更新状态

            import React from 'react'
            class SearchedUser extends React.Component {
                constructor(props) {
                    super(props);
                    this.state = {
                        Name:[]
                    }
                }

            /** When the SearchedUser component does anything with the new props,
            * componentWillReceiveProps is called, with the next props as the argument */


            componentWillReceiveProps(nextProps) {

                /** Update  state**/
                if (nextProps.UserName !== this.props.UserName) {
                    this.setState({
                        Name: nextProps.UserName
                    });
                }

            }

                render() {
                    console.log(this.state.Name);
                    return ( <
                        div >
                        <
                        /div>
                    )
                }
            }
            export default SearchedUser;

Answer 4

您需要在类组件中按props访问this.props.propsName。

//SearchedUser component

import React from 'react'
class SearchedUser extends React.Component{
  constructor(props){
    super(props);
      this.state={
        Name: this.props.UserName
      }
   }

  render(){
    return(
      <div>         
      </div>
     )
   }
 }
 
export default SearchedUser;

如何将数组从API作为props传递给另一个组件

4 个答案: