javascript - 类型错误:尝试使用本地存储而不是使用状态时无法读取未定义的属性“地图”
问题描述
我正在尝试在我的一个组件上使用本地存储挂钩,尽管将它作为道具传递下来,但我收到的“列表”是未定义的。第一个代码块是我的 App.js,第二个代码块是我的组件。我通过将一个空对象传递给我的 useLocalStorage 钩子来短暂地工作,但不知道我是如何破坏它的:)
TypeError:无法读取未定义的属性“地图”
import React, { useState, useEffect } from "react";
import { Route } from "react-router-dom";
import SavedList from "./Movies/SavedList";
import MovieList from "./Movies/MovieList";
import Movie from "./Movies/Movie";
import axios from 'axios';
import UpdateForm from "./Movies/UpdateForm"
import useLocalStorage from "./hooks/useLocalStorage"
const App = () => {
const [savedList, setSavedList] = useLocalStorage();
const [movieList, setMovieList] = useState([]);
const getMovieList = () => {
axios
.get("http://localhost:5000/api/movies")
.then(res => setMovieList(res.data))
.catch(err => console.log(err.response));
};
const addToSavedList = movie => {
setSavedList([...savedList, movie])
}
useEffect(() => {
getMovieList();
}, []);
const setMovie = updatedMovie => {
const updatedMovies = [...movieList];
const index = updatedMovies.findIndex(item => item.id === updatedMovie.id);
updatedMovies[index] = updatedMovie;
setMovieList(updatedMovies);
};
const deleteMovies = deletedMovie => {
const newMovies = [...movieList];
const filteredMovies = newMovies.filter(item => item.id !== deletedMovie)
setMovieList(filteredMovies);
};
return (
<>
<SavedList list={savedList} />
<Route exact path="/">
<MovieList movies={movieList} />
</Route>
<Route path="/movies/:id">
<Movie addToSavedList={addToSavedList} deleteMovies={deleteMovies} />
</Route>
<Route exact path="/update-movie/:id"
render={props => <UpdateForm {...props} movies={movieList} setMovie={setMovie} /> } />
</>
);
};
export default App;
这是我的 SavedList 组件
import { NavLink, Link } from 'react-router-dom';
function SavedList({ list }) {
return (
<div className="saved-list">
<h3>Saved Movies:</h3>
{list.map(movie => {
return (
<NavLink
to={`/movies/${movie.id}`}
key={movie.id}
activeClassName="saved-active"
>
<span className="saved-movie">{movie.title}</span>
</NavLink>
);
})}
<div className="home-button">
<Link to="/">Home</Link>
</div>
</div>
);
}
export default SavedList;
解决方案
尝试传递键和初始值
const [savedList, setSavedList] = useLocalStorage('savedlist',[])
推荐阅读
- reactjs - 在 reactjs 中显示 PDF 文件
- angular - 在angular2 google-maps中的circleRedim之后无法获得圆半径
- android-room - 带有协程的房间数据库
- javascript - 在下一个连接中链接中间件失败并出现错误处理程序
- javascript - 解析excel文件(XLSX)时如何获取单元格的日期格式
- postgresql - Quarkus JPA Postgres 存储过程调用 - 使用 CALL 错误
- android - 如何在所有组件上添加加载视图
- angular - 如何在数组上查找最小值、最大值以及如何使用角度更改最小值绿色和最大值红色的颜色文本
- java - 如何从 Spring Boot 向 Outlook 日历添加事件?
- azure - 用于 Cordova 10 的 cordova-plugin-ms-azure-mobile-apps