在子组件中反应渲染用户列表答案

【问题标题】：React rendering user list in child component在子组件中反应渲染用户列表
【发布时间】：2018-01-25 03:53:52
【问题描述】：

在我的父组件（搜索栏组件）中，我有这段代码将数组向下传递给子组件：

提交表单后，我向我的后端数据库发出 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中，它打印出我想要的，但是一旦我将userList返回给render函数，它就会变成promise？

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

【问题讨论】：

为什么是renderUsersan async 方法？那里似乎没有任何异步工作，我相信async 函数会返回Promise，这就是第三个控制台日志（render 中的那个）为您提供该输出的原因。
尝试从renderUsers() 之前删除async。
看来这是我之前做的一些重构的错误。谢谢！！

标签： javascript reactjs promise axios

【解决方案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。

【讨论】：

我的愚蠢错误！最初我在 UserSearchResult 中进行 axios 调用，但将其移出并忘记删除异步。另外你是对的，它不需要是一个类，谢谢你的提示:)

【解决方案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>
    );
  }
}

【讨论】：