TypeError: Невозможно прочитать свойство 'map' из undefined при попытке использовать LocalStorage вместо useState - PullRequest
Новая
       34

TypeError: Невозможно прочитать свойство 'map' из undefined при попытке использовать LocalStorage вместо useState

1 голос
/ 25 апреля 2020

Я пытаюсь использовать ловушку локального хранилища для одного из моих компонентов, получаю, что «список» не определен, несмотря на то, что я передаю его как опору Первый кодовый блок - это мое приложение. js, второй кодовый блок - мой компонент. Я на короткое время сработал, передав пустой объект в свой хук useLocalStorage, но не могу понять, как я его сломал:)

TypeError: Невозможно прочитать свойство 'map' из неопределенного 

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;

1 Ответ

0 голосов
/ 25 апреля 2020

Попробуйте передать ключ и начальное значение 

 const [savedList, setSavedList] = useLocalStorage('savedlist',[])
...