Обновление компонента после вызова API-интерфейса Reactjs

Question

У меня есть этот компонент, где он позволяет пользователю искать друзей в приложении, используя их адрес электронной почты.Пользовательский интерфейс является формой ввода, и когда пользователь отправляет форму вместе с электронной почтой, я хочу вернуть информацию о друге в форме и добавить кнопку «Добавить друга».В настоящее время я реализовал отображение результата от вызова 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>
        );
    }
}

Мой render() снова вызывается, когда вызывается setState(), и когда я отлаживаю его, я вижу, что friend не равно нулю и содержит информацию.Я также пытался forceUpdate(), но возникает та же проблема.Кто-нибудь знает, в чем проблема?

Answer 1

вам нужен оператор возврата в функции карты.

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

или используйте скобки

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