我如何使用 fetch API 并在状态下存储响应？

Posted 2023-02-15

【中文标题】我如何使用 fetch API 并在状态下存储响应？

【英文标题】：How I do use fetch API and store response in the state?

【发布时间】：2022-01-21 12:04:18

【问题描述】：

我必须从服务器获取一个文件，在渲染组件后，其中包含来自城市的信息，我必须将它分配给状态中的 "citiesData"。但是没有收到数据，因为它在输出中没有看到。

我的抓取有什么问题？

服务器文件：

IranMap（该文件在获取时似乎有问题）：

import React from 'react';
import './IranMap.css';
import CityModal from './CityModal';

class IranMap extends React.Component 

    state = 
        error: null,
        citiesData: null,
        selectedCity: null,
        isModalOpen: false,
    ;

    componentDidMount() 
        fetch('http://localhost:9000/cities')
            .then(response => response.json())
            .then((result) => 
                this.setState(
                    citiesData: result
                );
            ,
                (error) => 
                this.setState(
                    error
                );
                
            )
    

    cityClicked = (id) => (event) => 
        event.preventDefault();
        fetch(`http://localhost:9000/cities/$id`,method: 'GET')
            .then(res => res.json())
            .then(result => 
                this.setState(
                    selectedCity: result,
                    isModalOpen: true
                );
            )
    

    closeModal = () => 
        this.setState(
            isModalOpen: false,
        );
    ;

    render() 
        if(this.state.error)
            return <div>Error: this.state.error.message</div>;
        
        else 
            return (
                <div>
                    <div className="map-container">

                        (this.state.citiesData || []).map((record) => (
                            <div
                                key=record.id
                                className="city-name"
                                style=
                                    top: `$record.top%`,
                                    left: `$record.left%`,
                                
                                onClick=this.cityClicked(record.id)
                            >
                                record.name
                            </div>
                        ))
                    </div>
                    <CityModal
                        city=this.state.selectedCity
                        isOpen=this.state.isModalOpen
                        onClose=this.closeModal
                    />
                </div>
            );
        
    


export default IranMap;

这是我的输出。它应该是显示城市名称。但这是空的：

【问题讨论】：

现在显示城市的问题解决了。

【参考方案1】：

我认为你正在尝试做的是渲染整个对象，你不能这样做，尝试渲染每个元素，我的答案的第二部分是你应该使用异步任务。

希望我的回答能指导你

【讨论】：

谢谢。我只展示了我的代码的一部分。我想完成它。在渲染部分，每个元素都使用 map 方法进行映射。我只需要获取。我的问题只是关于如何获取。