Reactjs 如何使用react迭代API调用的结果？

我已经创建了一个搜索表单。用户可以搜索公司名称、名字和姓氏。我将搜索参数提交到API：

https:/hiddenlink.cfc？method=getSearch&companyname=${this.state.companyname}&firstname=${this.state.firstname}&lastname=${this.state.lastname}`

我可以看到数据正在返回：

以下是我的onSubmit函数：

handleSubmit = async event => {
    event.preventDefault();

    const response = await axios.get(`linkhidden.cfc?method=getSearch&companyname=${this.state.companyName}&firstname=${this.state.firstName}&lastname=${this.state.lastName}`)
    .then(result => {
        this.setState({ phonebook: result.phonebook });
        console.log(result);
    });
};

如何使用API返回的数据更新状态并显示结果

我在谷歌上搜索了3天，尝试了所有的方法，但都没有效果：

如果你这样做的话

handleSubmit = event => { 
    event.preventDefault(); 
    const response = axios .get( linkhidden.cfc?method=getSearch&companyname=${this.state.companyName}&firstname=${this.state.firstName}&lastname=${this.state.lastName} ) 
        .then(result => { 
            this.setState({ phonebook: result.data.phonebook }); // replaces the current this.state.phonebook
            console.log(result) // displays the result in the screenshot
        }); 
    };
}

然后您可以在渲染注释中显示this.state.phonebook，因为在屏幕截图中phonebook是一个数组，所以我假设有多个条目

render() {
    return(
        { this.state.phonebook.map((item, index) => (
            <ul key={'phonebook_'+index}>
                { // iterate through each property (or otherwise access them specifically with item.city, item.email_address, etc)
                Object.keys(item).map((itemProperty, itemIndex) => (
                    <li key={'phonebook_'+index+'_'+itemIndex}>
                        {item[itemProperty]}
                    </li>
                ))
            }
            </ul>
        ))}
    )
 }

---

您如何调用API？您能显示代码的这一部分吗？handleSubmit=async event=>{event.preventDefault；const response=wait axios.get linkhidden.cfc？method=getSearch&companyname=${this.state.companyname}&firstname=${this.state.firstname}&lastname=${this.state.lastname}。然后result=>{this.setState{phonebook:result.phonebook}；//console.logresult；}；}；请使用相关的格式化代码更新您的问题。您可以发布您的状态吗？另外，您正在使用.then和async/WAIT。您应该选择其中一个。我建议删除.then块，并在变量声明后添加console.logresponse.data以查看您接收的数据是否正确ly.我收到了回复。出于隐私原因，我无法发布所有代码。当我向您添加代码时，我得到了以下C:\Users\mboea\Documents\js\phonebook\src\components\Search.js 84:23错误解析错误：意外令牌，应为82 | 83 |{//遍历每个属性，或者专门使用item.city、item.email_地址等访问它们>84 | Object.keysitem.mapitemProperty、itemIndex=>^85 | 86 |{item[itemProperty]}87 |您需要将此.setState{phonebook:result.phonebook}更改为此.setState{phonebook:result.data.phonebook}.Axios将响应正文放在data属性上。您很可能会收到错误，因为response.phonebook未定义。您可以发布渲染函数吗？您可能需要初始化此.state.phonebook，正如@bilwit所说。在您的状态中，请确保有{phonebook:[]}。如果在渲染中有此.state.phonebook.map…而未在您的状态中对其进行初始化，React将引发错误，因为此.state.phonebook未定义。如果您在您的状态中将phonebook属性初始化为空数组，并在渲染方法中执行了此.state.phonebook.map，则其他内容将引发错误。Anotherr可能是您的此上下文并不是指您的组件。很难说，因为我面前没有代码。重要的是提供一个最小的、可复制的代码示例来演示您的问题。否则，我们会有这些尝试调试代码的长时间、长时间的聊天会话。