React Leaflet 标记未使用 useEffect 从 API 获取的位置数据进行渲染

Question

我正在尝试使用 React Leaflet 以及使用 useEffect 从 API 获取的数据来渲染传单标记。尽管在声明标记时位置数据非空，但标记并未显示（据说是通过使用条件渲染，尽管我不再那么确定）。

useEffect 的代码：

const [arr, setArr] = React.useState([]);
const [dataLoaded, setDataLoaded] = React.useState(false);

useEffect(() => {
    axios.get('http://localhost:8000/get-data/')
    .then(res => {
        if (res.data) {
          const data = res.data
          for (let i = 0; i < data.length; i++) {
            arr.push(data[i])
          }
        }
    })
    .then(res => {
      if ( arr.length > 0) {
        setDataLoaded(true)
      }
    })
}, [])

渲染标记的代码：

{ dataLoaded ? console.log(arr[0].latitude, arr[0].longitude) : null}
{ dataLoaded ? <Marker position={[parseFloat(arr[0].latitude), parseFloat(arr[0].longitude)]}> 
    <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
    </Popup>
</Marker> : <></> }

这是我尝试从数据数组中渲染第一组坐标的示例。我包含了用于调试的控制台日志，它分别输出纬度和经度的值 36.77 和 -199.41。这些与用于标记位置的变量完全相同。但由于某种原因，该标记没有显示在我的地图上。如果我直接将值 [36.77, -119.41] 输入到其位置，则标记会显示出来。关于为什么会发生这种情况有什么想法吗？

Answer 1

首先，像

state

一样更新

arr

应该在

setArr

之内，还需要更改

array

引用，使用

push

更新

arr

不会使组件重新渲染。

首先是一个具有空依赖的

useEffect

，您可以设置

arr

值。

useEffect(() => {
    axios.get('http://localhost:8000/get-data/')
    .then(res => {
        if (res.data) {
            setArr(prevArr => [...prevArr, ...res.data]);
        }
    })
}, []);

然后其他

useEffect

与

arr

依赖项来设置

dataLoaded

useEffect(() => {
    if (arr.length > 0) {
        setDataLoaded(true);
    }
}, [arr]);