は、私は、子コンポーネントにダウン配列を渡し、このコードを持っている私の親コンポーネント（検索バー成分）で子コンポーネント

Question

にユーザリストをレンダリングリアクト：フォームが送信されると

私はaxiosが私の背中に要求しています作ります末端データベース

async onFormSubmit(event) { 
    event.preventDefault(); 
    const users = await axios.post("/api/fetchuser", { 
     persona: this.state.term 
    }); 

    let userArray = this.state.userArray; 
    userArray = users.data.map(user => { 
     return user.steamInfo; 
    }); 

    this.setState({ userArray: userArray }); 
    } 

それから私は、子コンポーネントにuserArrayを伝承：私の子コンポーネントで

renderResults() { 
    if (this.state.userArray.length > 0) { 
     return <UserSearchResult userArray={this.state.userArray} />; 
    } else { 
     return; 
    } 
    } 

私はこれを持って、私はshになりますようconsole.logsのノートを保ちますその後の出力。ここで

class UserSearchResult extends Component { 
    async renderUsers() { 
    let userList = this.props.userArray; 
    console.log(userList); 

    userList = userList.map(user => { 
     return (
     <Segment> 
      <Grid> 
      <Grid.Column width={3} style={resultStyle.results}> 
       <Image src={user.avatar} fluid /> 
      </Grid.Column> 
      <Grid.Column width={9} /> 
      <Grid.Column width={3} /> 
      </Grid> 
     </Segment> 
    ); 
    }); 

    console.log(userList); 
    return userList; 
    } 

    render() { 
    return (
     <div> 
     {console.log(this.renderUsers())} 
     </div> 
    ); 
    } 
} 

が出力されます：最初の2 console.logsで

、それは私がしたい正確に何をプリントアウトし、私は戻ってレンダリング機能にUSERLISTを返したら、それ約束事に変わる？

私の質問はです：なぜ、それがレンダリング機能に返されたときに、他のものに変更されていますか？そして、私のjsxに従って、どのように配列の各要素をレンダリングできますか？

Answer 1

asyncを削除してみてください。 asyncは、関数が必要でない約束を返すようにします。

UserSearchResultもクラスである必要はありません。

const UserSearchResult = (props) => { 
    const userList = this.props.userArray; 
    console.log(userList); 

    const UserDetail = ({user}) => { 
    return (
     <Segment> 
     <Grid> 
      <Grid.Column width={3} style={resultStyle.results}> 
      <Image src={user.avatar} fluid /> 
      </Grid.Column> 
      <Grid.Column width={9} /> 
      <Grid.Column width={3} /> 
     </Grid> 
     </Segment> 
    ); 

    console.log(userDetail); 

    return (
    <div> 
     {userList.map((user, index) => <UserDetail key={index} user={user} />)} 
    </div> 
); 
} 

それとも、ただ{userList.map((user, index) => <UserDetail key={index} user={user} />)}元のコンポーネント内とUserDetailそれは自身のコンポーネントだとUserSearchResultを取り除くを作ることができます。

Answer 2

非同期部分を削除する必要があります。私はそれがあなたの問題の根源だと信じています。私は以下のコードをリファクタリングしました：

class UserSearchResult extends Component { 

    render() { 
    const { userArray } = this.props 
    return (
     <div> 
     { userArray.map(user => { 
      return (
       <Segment> 
       <Grid> 
        <Grid.Column width={3} style={resultStyle.results}> 
        <Image src={user.avatar} fluid /> 
        </Grid.Column> 
        <Grid.Column width={9} /> 
        <Grid.Column width={3} /> 
       </Grid> 
       </Segment> 
      ); 
      }); 
     } 
     </div> 
    ); 
    } 
}