仅在更改上显示

Question

import React, { useState, useEffect } from "react";
import Nav from "./nav.jsx";
import axios from "axios";
import Mensbuttons from "./mensbuttons.jsx";

export default function Standort() {
  const [radius, setRadius] = useState(10);
  const [latitude, setLatitude] = React.useState("");
  const [longitude, setLongitude] = React.useState("");
  React.useEffect(() => {
    navigator.geolocation.getCurrentPosition((position) => {
      setLatitude(position.coords.latitude);
      setLongitude(position.coords.longitude);
    });
  }, []);
  function handleClick() {
  setLongitude()
  }

  const [posts, setPosts] = useState([]);
  useEffect(() => {
    axios
      .get(
        "https://openmensa.org/api/v2/canteens?near[lat]=" +
          latitude +
          "&near[lng]=" +
          longitude +
          "&near[dist]=" +
          radius
      )
      .then((res) => {
        setPosts(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <>
      <Nav />
      <div class="header">
        <h1>Mensen in der Nähe</h1>
      </div>
      <button onClick={handleClick(2)}>2</button>
      {posts.map((list) => {
        return <Mensbuttons name={list.name} id={list.id} />;
      })}
    </>
  );
}

大家好，所以我有一个方法，我想展示附近的食堂。为此，我获取当前的协调器，并将它们作为varible传递到api的Url中。问题是，食堂的按钮只有在我更改代码时才会出现。所以我可能得改换一下。但如果我试着用按钮的方法来做。什么也没有出现，可能是因为有太多的改进机。(我认为这是因为这显示在控制台上)我希望你能帮助我。

Answer 1

您的onClick处理程序应该是函数，而不是函数调用。

而不是

<button onClick={handleClick(2)}>2</button>

使用

<button onClick={() => handleClick(2)}>2</button>

Answer 2

我相信您还没有正确定义useEffects。

我将经度和纬度状态简化为单个coordinates状态。它被初始化为null。

  const [coordinates, setCoordinates] = React.useState(null);

在第一个呈现中将其设置为真坐标：

    React.useEffect(() => {
    navigator.geolocation.getCurrentPosition((position) => {
      setCoordinates(position.coords);
       
    });
  }, []);

现在，只有在useEffect更改后才能运行第二个coordinates：

    useEffect(() => {
  if (coordinates) { // Don't let it make get request if it is null.
    const { latitude, longitude } = coordinates;
    axios
      .get(
        "https://openmensa.org/api/v2/canteens?near[lat]=" +
          latitude +
          "&near[lng]=" +
          longitude +
          "&near[dist]=" +
          radius
      )
      .then((res) => {
        setPosts(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }
}, [coordinates]);

而且，我认为这个按钮不再需要了：

      <button onClick={handleClick(2)}>2</button>

最后守则：

import React, { useState, useEffect } from "react";
import Nav from "./nav.jsx";
import axios from "axios";
import Mensbuttons from "./mensbuttons.jsx";

export default function Standort() {
  const [radius, setRadius] = useState(10);
  const [coordinates, setCoordinates] = React.useState(null);

  React.useEffect(() => {
    navigator.geolocation.getCurrentPosition((position) => {
      setCoordinates(position.coords);
    });
  }, []);

  const [posts, setPosts] = useState([]);
  useEffect(() => {
    if (coordinates) {
      // Don't let it make get request if it is null.
      const { latitude, longitude } = coordinates;
      axios
        .get(
          "https://openmensa.org/api/v2/canteens?near[lat]=" +
            latitude +
            "&near[lng]=" +
            longitude +
            "&near[dist]=" +
            radius
        )
        .then((res) => {
          setPosts(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }, [coordinates]);

  return (
    <>
      <Nav />
      <div class="header">
        <h1>Mensen in der Nähe</h1>
      </div>
      {posts.map((list) => {
        return <Mensbuttons name={list.name} id={list.id} />;
      })}
    </>
  );
}