在子组件中响应渲染用户列表

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

在我的子组件中我有这个，请记下 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>
    );
  }
}

这是输出：

在前两个 console.logs 中，它打印出我想要的内容，但是一旦我 return 将 userList 返回到渲染函数，它就会变成 promises?

我的问题是：为什么 userList 在 returned 到呈现函数时会更改为其他内容。以及如何根据我的 jsx 渲染数组中的每个元素？

Answer 1

尝试删除 async。 async 使您的函数 return 成为一个不必要的承诺。

此外 UserSearchResult 不需要是 class，只需这样做即可。

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

在子组件中响应渲染用户列表

React rendering user list in child component

javascript

promise

reactjs

axios