获取数据应该存储在一个状态答案

【问题标题】：fetch data should be store in a state获取数据应该存储在一个状态
【发布时间】：2021-09-09 00:36:04
【问题描述】：

从 mysql 获取数据，但无法以状态存储该数据。我正在建立用户实时位置。用户数据位于 mysql 中，我正在获取该数据并尝试在谷歌地图中显示数据。

import { React, useState, useEffect } from "react";
    import "./App.css";
    import axios from "axios";
    import {
      GoogleMap,
      withScriptjs,
      withGoogleMap,
      Marker,
      InfoWindow,
    } from "react-google-maps";
    
    function Map() {
      const [selectedPark, setSelectedPark] = useState([]);
      var data = "";
      var config = {
        method: "get",
        url: "http://localhost:3002/user",
        headers: {},
        data: data,
      };
      useEffect(() => {
        axios(config)
          .then(function (response) {
            console.log(JSON.stringify(response.data));
            setSelectedPark(response.data);
            console.log(selectedPark);
          })
          .catch(function (error) {
            console.log(error);
          });
      }, []);
      return (
        <GoogleMap
          defaultZoom={10}
          defaultCenter={{ lat: 24.860966, lng: 66.990501 }}
        >
          {selectedPark.map((park) => (
            <Marker
              key={park.user_Id}
              position={{
                lat: park.latitude,
                lng: park.longitude,
              }}
              onClick={() => {
                setSelectedPark(park);
              }}
              onCloseClick={() => {
                setSelectedPark(null);
              }}
              icon={{
                url: "https://raw.githubusercontent.com/leighhalliday/google-maps-react-demo/2bcd4ca7184ea9ed9edbc25021c2e721a74c027f/public/skateboarding.svg",
                scaledSize: new window.google.maps.Size(25, 25),
              }}
            />
          ))}
          {selectedPark && (
            <InfoWindow
              position={{
                lat: selectedPark.latitude,
                lng: selectedPark.longitude,
              }}
            >
              <div>
                <h2>{selectedPark.area_name}</h2>
                <p>{selectedPark.area_description}</p>
              </div>
            </InfoWindow>
          )}
        </GoogleMap>
      );
    }
    const WrappedApp = withScriptjs(withGoogleMap(Map));
    function App() {
      return (
        <div style={{ width: "100vw", height: "100vw" }}>
          <WrappedApp
            googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyDmVpJ44AZEUIs-ml0R1Q0URcmr-Q-DMC4`}
            loadingElement={<div style={{ height: "100%" }} />}
            containerElement={<div style={{ height: "100%" }} />}
            mapElement={<div style={{ height: "100%" }} />}
          />
        </div>
      );
    }
    
    export default App;

服务器工作正常，我可以从控制台看到数据，它工作正常，但唯一的问题是我无法将这些数据存储在某个状态

【问题讨论】：

这能回答你的问题吗？ useState set method not reflecting change immediately
不，我得到一个空白数组
是的，因为您在调用状态更新程序后立即进行控制台日志记录。状态不是这样运作的。
@Yusura Masood 你不会在状态更新后立即看到日志，这是因为 React 批处理了 setState
我在 useEffect 之后使用了 console.log，但它仍然显示空白数组

标签： javascript mysql node.js reactjs

【解决方案1】：

React 批处理 setState ，因此您无法立即看到更改。这样做

再添加一个 useEffect

useEffect(()=>{
   console.log(selectedPark)
},[selectedPark])

【讨论】：

我仍然得到一个空白数组
这是对的。需要注意的最重要的部分（如副本中的链接）是selectedPark 是const。状态与否，const 无法更改。
[]length: 0[[Prototype]]: Array(0)

【解决方案2】：

useEffect(() => {
   const fetchData = async () => {
        axios(config)
        .then(response => response.json())
        .then(response => setSelectedPark(response.data))
        .catch(function (error) {
          console.log(error);
        });
   }

   fetchData();
}, []);

在useEffect中尝试这个请求示例，与您的代码进行比较，在我的示例中，我使用promise链从promise返回数据（第一个然后调用json方法，第二个然后返回清除数据并保存在状态中）

为了更舒适的调试，您可以在将数据保存为状态时在某个地方进行控制台登录

【讨论】：

TypeError: response.json is not a function at App.js:23
尝试删除调用json方法，我不确定，但是用axios可能没有必要