How to save data to array axios?

Question

I am pushing to an array

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} />
      })

But always When I need this array it refreshes and I get at the start - '' and then actual data, I need to get once to interact with its.

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)}`
}

Answer 1

The Code Sandbox have dependencies error but the solution could be something like this

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;

Answer 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)
  }
  )

How to save data to array axios?

Question

2 answers

solution1
0 2020-08-23 18:24:04

solution2
0 2020-08-24 18:36:04

How to save data to array axios?

Question

2 answers

solution1 0 2020-08-23 18:24:04

solution2 0 2020-08-24 18:36:04

solution1
0 2020-08-23 18:24:04

solution2
0 2020-08-24 18:36:04