如何将数据保存到数组axios？答案

【问题标题】：How to save data to array axios?如何将数据保存到数组axios？
【发布时间】：2020-08-25 02:36:04
【问题描述】：

我正在推送一个数组

options.push(
      {
        value: <Adrress x={edge.node.location.lon} y={edge.node.location.lat} />,
        label: <Adrress x={edge.node.location.lon} y={edge.node.location.lat} />
      })

但总是当我需要这个数组时，它会刷新，然后我开始 - '' 然后是实际数据，我需要一次与它交互。

export default function DataFteching({ x, y }) {
  const [adrress, setAdrress] = useState(null)
  const [loading, setLoading] = useState(true)
  const region = /place/
  useEffect(() => {
    async function FtechData() {
      const token = 'pk.eyJ1IjoiYW5kcmlpbXNuIiwiYSI6ImNrZGYzZ200YTJudXQyeHNjMjk2OTk2bjUifQ.njqMX6x6U946yjJdWwA7mA';
      await axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${x},${y}.json?access_token=${token}`)
        .then(res => {
          // console.log(res.data.features.find(place => place.id.match(region)).text)
          setAdrress(res.data)
        })
        .catch(err => console.log(err))
        .finally(() => setLoading(false));
    }
    FtechData();
  }, [])
  if (loading) return false;
  // console.log({ adrress.features.find(place => place.id.match(region)).text })
  console.log(`${(adrress.features.find(place => place.id.match(region)).text)}`)
  return `${(adrress.features.find(place => place.id.match(region)).text)}`
}

【问题讨论】：

能否提供更多信息，能否分享一下组件的代码，您在哪里推送和获取数据？
@YoandryCollazo codesandbox.io/s/brave-wind-pqpki?file=/src/App.js
@YoandryCollazo 我找到了解决方案

标签： javascript reactjs graphql

【解决方案1】：

代码沙箱有依赖错误，但解决方案可能是这样的

import React, { useEffect, useState } from "react";
import { Link, graphql, useStaticQuery } from "gatsby";

import Layout from "../components/layout";
import blogStyles from "./Styles/blog.module.scss";
import Head from "../components/head";
import Adrress from "../components/Map/ftechAdrress";
import WithCallbacks from "../components/Search-panel";

const BlogPage = () => {
  const [options, setOptions] = useState([]);
  const data = useStaticQuery(graphql`
    query {
      allContentfulBlogPost(
        sort: { fields: publishedDate, order: DESC }
        filter: { node_locale: { eq: "en-US" } }
      ) {
        edges {
          node {
            title
            slug
            publishedDate(formatString: "MMM Do, YYYY")
            image {
              file {
                url
              }
            }
            location {
              lat
              lon
            }
            breed
            find
          }
        }
      }
    }
  `);

  useEffect(() => {
    const tmp = [];
    data.allContentfulBlogPost.edges.forEach((edge) => {
      tmp.push({
        value: (
          <Adrress x={edge.node.location.lon} y={edge.node.location.lat} />
        ),
        label: <Adrress x={edge.node.location.lon} y={edge.node.location.lat} />
      });
    });
    setOptions([...tmp]);
  }, [data]);

  return (
    <Layout>
      <Head title="Blog" />
      <h1>lost pets</h1>
      {console.log(options)}
      <WithCallbacks options={options} />
      <ol className={blogStyles.posts}>
        {options.map((edge) => {
          const styles = edge.node.image
            ? `url("${edge.node.image.file.url}")`
            : `url("https://cdn.pixabay.com/photo/2019/07/30/05/53/dog-4372036__340.jpg")`;

          return (
            <li>
              <Link to={`/blog/${edge.node.slug}`}>
                <div
                  style={{ backgroundColor: "pink", backgroundImage: styles }}
                >
                  <h2>{edge.node.title}</h2>
                  <p>{edge.node.publishedDate}</p>
                  <p>Порода: {edge.node.breed}</p>
                  <p>
                    Статус: <span>{edge.node.find ? "Найден" : "Потерян"}</span>
                  </p>
                  <p>
                    city:{" "}
                    <Adrress
                      x={edge.node.location.lon}
                      y={edge.node.location.lat}
                    />
                  </p>
                </div>
              </Link>
            </li>
          );
        })}
      </ol>
    </Layout>
  );
};

export default BlogPage;

【讨论】：

对不起，选项仍在重新加载。我需要一些常量，加载数据时将保存在哪里。我不知道
嗯，试试去掉useEffect(()=>{},[data])去掉数据依赖useEffect(()=>{},[])
尝试让代码沙箱工作更有效！
我找到了解决办法

【解决方案2】：

const options = []
  const region = /place/
  data.allContentfulBlogPost.edges.forEach(async (edge) => {
    await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${edge.node.location.lon},${edge.node.location.lat}.json?access_token=${token}`)
      .then(response => response.json())
      .then(json => options.push({
        value: json.features.find(place => place.id.match(region)).text,
        label: json.features.find(place => place.id.match(region)).text
      }))
    console.log(options)
  }
  )

【讨论】：