Блог

Я получаю ошибку «posts.map не является функцией this», когда я удаляю сообщение, но если я обновляю страницу, она снова работает нормально, есть какие-нибудь комментарии или советы о том, как это исправить?

функция, с помощью которой я удаляю свой пост:

     const deletePost = (id) => {
        const fetchData = async (id) => {
        await axios.delete('http://localhost:5000/posts/' id);
        setPosts({
            posts: posts.filter(element => element._id !== id)
        })
        };
        fetchData(id);
        // window.location = '/posts';
      };
 

Функция, при которой я получаю ошибку:

       const postList = () => {
            return posts.map(currentPost => {
                return <Post post = {currentPost} deleteExercise={deletePost} key={currentPost._id} />
            })
        };
 

Компонент, который я вызываю, удаляет функцию:

 const Post = props => 
(
    <ul>
        <li>Date: {props.post.createdAt}</li>
        <li>Title: {props.post.title}</li>
        <li>Your Post: {props.post.postBody}</li>
        <li>
            <Link to={'/edit/'   props.post._id}> edit </Link>| <a onClick={() => props.deletePost(props.post._id)} > Delete </a>
        </li>
    </ul>
)
 

Функция, с помощью которой я получаю все свои сообщения из базы данных:

  const [posts, setPosts] = useState([]);
    useEffect(() => {
        const username = localStorage.getItem("username");
        axios.get('http://localhost:5000/posts/')
            .then(post => {
                setPosts(post.data.filter( x => x.username === username))
            })
       }, []);
 

кажется, что вы объявляете сообщения как объект:

 setPosts({
        posts: posts.filter(element => element._id !== id)
    })
 

вместо того, чтобы, как вы делаете в выборке :

 setPosts( posts.filter(element => element._id !== id))