时间戳

首页 > 解决方案 > 当我在不同组件的输入框中键入时反应 Mapbox 组件闪烁

javascript - 当我在不同组件的输入框中键入时反应 Mapbox 组件闪烁

问题描述

我想在一个页面上有一个地图和一个输入表单。用户应该能够在输入字段中输入内容，点击提交，然后将 Mapbox 组件移动到该位置。

我有两个问题，我怀疑它们是相关的。当我在输入框中输入时，地图组件会在每个 onChange 事件后闪烁。其次，当我提交表单时，地理定位成功获取，地图组件上的道具更新并出现地图标记，但是地图没有执行我刚进入 React Dev 工具并手动时看到的整洁动画更新道具。

我知道我是一个等级初学者，我敢肯定这有一千个问题。如果有人知道这个问题的答案，我会很高兴，但如果有人能指出我正确的方向，我也会很高兴。我花了一上午的时间查看 React 的“入门”和“钩子”部分，并学习了一些 React 课程，您可以在其中构建简单的应用程序，但显然有一些基本的东西没有深入了解。谢谢！

这是 NextJS 页面：

import ReactMapboxGl, { Marker } from 'react-mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import { useState } from 'react';

export default function TestPage() {
  const Map = ReactMapboxGl({
    accessToken: process.env.NEXT_PUBLIC_MAPBOX,
  });

  const [searchLocation, setSearchLocation] = useState('');
  const [geolocate, setGeolocate] = useState({
    coordinates: [2.61878695312962, 47.8249046208979],
    isPin: false,
  });

  async function fetchGeolocate(location) {
    const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${location}.json?access_token=${process.env.NEXT_PUBLIC_MAPBOX}`;
    fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.text();
      })
      .then((myText) => {
        const json = JSON.parse(myText);
        const coordinates = json.features[0].center;
        setGeolocate({ coordinates, isPin: true });
      });
  }

  function handleInputChange(event) {
    setSearchLocation(event.target.value);
  }
  function handleForm(e) {
    e.preventDefault();
    fetchGeolocate(searchLocation);
  }

  return (
    <>
      <Map
        style="mapbox://styles/mapbox/streets-v11"
        containerStyle={{
          height: '50vh',
          width: '100vw',
        }}
        center={geolocate.coordinates}
        zoom={[3]}
      >
        {geolocate.isPin && (
          <Marker coordinates={geolocate.coordinates}>
            <span className="text-3xl" role="img" aria-label="push-pin">
              
            </span>
          </Marker>
        )}
      </Map>

      <form onSubmit={handleForm}>
        <div className="flex flex-col mb-4">
          <label
            htmlFor="search"
            className="flex flex-col uppercase font-bold text-lg text-gray-700"
          >
            Location
            <input
              type="text"
              name="search"
              placeholder="Location"
              value={searchLocation}
              className="border py-2 px-3 text-gray-700 block"
              onChange={handleInputChange}
            />
          </label>
        </div>
        <button type="submit">Find</button>
      </form>
    </>
  );
}

标签： javascriptreactjsreact-hooksreact-componentreact-state

解决方案

你对问题相关的感觉是正确的。Map一个问题是您在每次渲染时都重新初始化组件：

const Map = ReactMapboxGl({
    accessToken: process.env.NEXT_PUBLIC_MAPBOX,
  });

它还将阻止动画发生（我认为），因为它会创建一个新的 Map 实例，这将导致 React 卸载/重新安装组件。

编辑：来自下面 OP 的回答：在组件外部初始化

看起来您可以在任何渲染逻辑之外初始化组件。

替代方法：使用状态

在函数式组件中，我们希望将初始化逻辑放在useEffect中（或者如果它在第一次渲染之前useLayoutEffect发生很重要，那么）。

const [map, setMap] = useState()
useEffect(() => {
  const mapInit = ReactMapboxGl({
    accessToken: process.env.NEXT_PUBLIC_MAPBOX,
  })
  setMap(mapInit)
}, [])

最后[]是关键。它可以防止我们的回调在第一次之后被调用。

老实说，您的组件可能足够复杂，可以保证使用类组件，您可以在其中使用componentDidMount初始化，并且所有这些辅助函数都不必在每次渲染时重新计算。最终，这取决于你。

最后一点：您已声明fetchGeolocate为async，这意味着您可以根据需要使用，而不是调用.then所有结果await。或者拿走async& 继续使用Promise.then，由你决定。Mozilla 的文档可能有助于澄清差异。

推荐阅读