Javascript 在进行api调用后刷新组件

我有这个组件，它允许用户使用他们的电子邮件地址在应用程序上搜索朋友。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>
        );
    }
}

class FriendsView扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索结果：[]
};
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleEmailChange=this.handleEmailChange.bind（this）；
}
handleSubmit（事件）{
event.preventDefault（）；
风险值数据={
电子邮件：this.state.friendEmail
};
获取（'/api/searchFriend'{
方法：“post”，
标题：{'Content-Type'：'application/json'}，
正文：JSON.stringify（数据）
})。然后（响应=>{
response.json（）.then（数据=>{
这是我的国家({
搜索结果：数据
});
})
});
}
handleEmailChange（事件）{
var email=event.target.value；
这是我的国家({
friendEmail:email
});
}
render（）{
返回(
搜索好友


搜寻
{this.state.searchResults.map（（friend）=>{
{friend.email}
})}
);
}
}

---

我的

render（）

在调用

setState（）

时再次被调用，当我调试它时，我确实看到

friend

不是空的，它确实包含信息。我也尝试过

forceUpdate（）

，但同样的问题也出现了。有人知道问题出在哪里吗？

在map函数中需要一个return语句

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

{this.state.searchResults.map（（friend）=>返回{
{friend.email}
})}

或者使用括号

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

{this.state.searchResults.map（（friend）=>(
{friend.email}
))}

您没有从

map

函数返回任何内容。可能存在重复的