在子组件

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中，它打印出我想要的内容，但是一旦我将userList返回到render函数，它就变成了promises？

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

Answer 1

尝试删除var dict= JsonConvert.DeserializeObject<Dictionary<string, Item>>(json); 。 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。

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