![](/img/trans.png)
[英]“TypeError: Cannot read property 'name' of undefined” when using useState and useEffect
[英]TypeError: Cannot read property 'map' of undefined when trying to useLocalStorage instead of useState
我正在尝试在我的一个组件上使用本地存储挂钩,尽管将它作为道具传递下来,但我收到的“列表”是未定义的。 第一个代码块是我的 App.js,第二个代码块是我的组件。 我通过将一个空的 object 传递到我的 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',[])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.