反应传单v4设置和改变标记点击

我无法在单击时设置和更改标记。

我从浏览器中获取用户的位置，并用这些坐标将地图居中。当我运行console.log(coords(时，我可以看到浏览器获取的坐标，但当我使用[formValues.cords[0]，formValues.cords[1]]将标记设置为LatLngExpression时，它不起作用。当我点击地图时，它也不会改变坐标。我做错了什么，但我还没弄清楚在哪里。

我看到的另一件事是，whenCreated属性已从react传单v4:中删除

"从MapContainer组件中删除了whenCreated属性(可以使用ref回调(">

但我不知道如何在这种情况下使用这个ref回调。

有人能帮我吗？这是地图绘制部分的代码：

import {
Button,
ButtonContainer,
CategoryBox,
CategoryContainer,
CategoryImage,
Container,
Form,
FormTitle,
MapContainer,
Section,
} from "./styles";
import Input from "../../components/Input";
import { useState } from "react";
import { LatLngExpression, LeafletMouseEvent } from "leaflet";
import { TileLayer, Marker } from "react-leaflet";
import { categories } from "./categories";
import useGetLocation from "../../hooks/useGetLocation";
import { toast } from "react-toastify";
import { useNavigate } from "react-router-dom";
export default function New() {
const navigate = useNavigate();
const [formValues, setFormValues] = useState({
name: "",
description: "",
contact: "",
category: "",
coords: [0, 0],
});
const { coords } = useGetLocation();
console.log(coords);
async function onSubmit() {
const request = await fetch("http://localhost:5000/store", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
...formValues,
latitude: formValues.coords[0],
longitude: formValues.coords[1],
}),
});
if (request.ok) {
toast("Estabelecimento gravado com sucesso!", {
type: "success",
autoClose: 2000,
onClose: () => navigate("/"),
});
}
}
if (!coords) {
return <h1>Obtendo localização...</h1>;
}
return (
<Container>
<Form
onSubmit={(ev) => {
ev.preventDefault();
onSubmit();
}}
>
<FormTitle>Cadastro do comércio local</FormTitle>
<Section>Dados</Section>
<Input
label="Nome do local"
name="name"
value={formValues.name}
onChange={setFormValues}
/>
<Input
label="Descrição"
name="description"
value={formValues.description}
onChange={setFormValues}
/>
<Input
label="Contato"
name="contact"
value={formValues.contact}
onChange={setFormValues}
/>
<Section>Endereço</Section>
<MapContainer
center={
{
lat: coords[0],
lng: coords[1],
} as LatLngExpression
}
zoom={13}
whenCreated={(map) => {
map.addEventListener("click", (event: LeafletMouseEvent) => {
setFormValues((prev) => ({
...prev,
coords: [event.latlng.lat, event.latlng.lng],
}));
});
}}
>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker
position={
[formValues.coords[0], formValues.coords[1]] as LatLngExpression
}
/>
</MapContainer>
<Section>Categoria</Section>
<CategoryContainer>
{categories.map((category) => (
<CategoryBox
key={category.key}
onClick={() => {
setFormValues((prev) => ({ ...prev, category: category.key }));
}}
isActive={formValues.category === category.key}
>
<CategoryImage src={category.url} />
{category.label}
</CategoryBox>
))}
</CategoryContainer>
<ButtonContainer>
<Button type="submit">Salvar</Button>
</ButtonContainer>
</Form>
</Container>
);
}