如何解决尝试渲染坐标时反应传单类型错误
我正在使用 Redux / thunk 开发一个 React 项目,我有这张来自 react-leaflet 的地图:
import { MapContainer,Marker,Popup,TileLayer,Circle } from "react-leaflet";
import { useSelector } from "react-redux";
function Maps() {
const user = useSelector((state: any) => state.userReducer.getUserById);
const coords: [number,number] = [user ? user.latitude : 0,user ? user.longitude : 0];
const fillBlueOptions = { fillColor: "blue" };
const zone = 10000;
return (
<MapContainer className="maps" center={coords} zoom={10} scrollWheelZoom={false}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Circle center={coords} pathOptions={fillBlueOptions} radius={zone} />
<Marker position={coords}>
<Popup>Adress</Popup>
</Marker>
</MapContainer>
);
}
export default Maps;
我通过 axios 调用获取用户的坐标:
export const getUserById = (id_user: number | string) => {
return (dispatch: any) => {
dispatch(isLoading(true));
return axios
.get(`users/getUserById/${id_user}`)
.then((res) => {
dispatch(isLoading(false));
dispatch({ type: GET_USER_BY_ID,payload: res.data });
})
.catch((err) => {
console.log(err);
dispatch(isLoading(false));
});
};
};
当我点击这个表时,调度在这里启动:
<tbody>
{users.slice(0,20).map((item: any,index: number) => (
<tr
className="redirectUser"
onClick={() => {
history.push("/Utilisateurs");
dispatch(getUserById(item.id));
}}
key={index}
>
<td>{item.id}</td>
<td>
{item.nom} {item.prenom}
<br></br>Tcheker
</td>
<td>{item.email}</td>
<td>18/10/1998</td>
<td>{item.tel}</td>
</tr>
))}
</tbody>
当我尝试在具有坐标的用户上显示地图组件时,出现此错误(或地图仅显示空白屏幕):
未捕获的类型错误:无法读取未定义的属性“纬度”
然后,如果我返回历史记录并重新单击表格,地图最终会正确显示。
当用户没有任何坐标时,我收到此错误:
未捕获的类型错误:无法读取 null 的属性 'lng'
我知道组件似乎在获取数据之前渲染,但即使使用三元运算符在未定义答案的情况下给出硬编码值,组件也不会渲染。
解决方法
我认为这是一个异步问题。 coords 变量的本质看起来是非阻塞的,因此在执行三元之前执行渲染。 由于 coords 只是一个变量(而不是状态驱动),因此它永远不会重新渲染。 如果您可以在计算坐标时设置状态,然后将您的传单映射引用到状态中的变量,我认为您可以使其正常工作。
祝你好运
菲尔
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。