在api調用Reactjs后刷新組件

Question

我有這個組件，它允許用戶使用他們的電子郵件地址在應用程序上搜索朋友。 UI是一個輸入表單，當用戶使用電子郵件提交表單時，我想在表單下返回朋友的信息並添加“添加朋友”按鈕。 目前，我已經實現了顯示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>
))}