javascript - 进行 api 调用 Reactjs 后刷新组件

Question

我有这个组件，它允许用户使用他们的电子邮件地址在应用程序上搜索 friend 。 UI是一个输入表单，当用户通过电子邮件提交表单时，我想在表单下返回 friend 的信息并添加“添加 friend ”按钮。目前，我已经实现了显示 API 调用的结果(该 API 有效，我已经测试了很多次)，但由于某种原因它没有显示。

这是我的代码:

class FriendsView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchResults: []
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleEmailChange = this.handleEmailChange.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        var data = {
            email: this.state.friendEmail
        };
        fetch('/api/searchFriend', {
            method: 'post',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        }).then(response => {
            response.json().then(data => {
                this.setState({
                    searchResults: data
                });
            })
        });
    }

    handleEmailChange(event) {
        var email = event.target.value;
        this.setState({
            friendEmail: email
        });
    }

    render() {
        return (
            <div>
                <NavigationBar />
                <Container style={{ padding: 20 }}>
                    <Form onSubmit={this.handleSubmit}>
                        <FormGroup>
                            <Label><strong>Search for friends</strong></Label>
                            <Input type="email" name="email" onChange={this.handleEmailChange} placeholder="Friend's email address" required />
                            <br />
                            <Button>Search</Button>
                        </FormGroup>
                    </Form>
                    {this.state.searchResults.map((friend) => {
                        <div>
                            {friend.email}
                        </div>
                    })}
                </Container>
            </div>
        );
    }
}

当调用 setState() 时，我的 render() 再次被调用，并且当我调试它时，我确实看到 friend 没有null 并且它确实包含信息。我也尝试过 forceUpdate() 但出现了同样的问题。有谁知道问题可能是什么？

Answer 1

您需要在 map 函数中使用 return 语句。

{this.state.searchResults.map((friend) => return {
  <div>
    {friend.email}
  </div>
})}

或使用括号

{this.state.searchResults.map((friend) => (
  <div>
     {friend.email}
  </div>
))}