Блог

Главная - Вопросы по программированию - Я не могу получить значение компонента «postID» и «Post»

Я не могу получить значение компонента «postID» и «Post»

#javascript #reactjs #react-router

#javascript #reactjs #реагировать-маршрутизатор

Вопрос:

Когда я пытаюсь получить значение «postID, оно показывает undefined», а когда я пытаюсь получить компонент Post, он показывает «невозможно разрушить заголовок свойства, потому что props.posts не определен», в чем проблема, я не понял. Ссылка на Github «https://github.com/saakeeb/material-ui-react «.

 import React from 'react';
import { useParams } from 'react-router-dom';
import FakeData from '../FakeData/FakeData';
import Post from '../Post/Post';

const PostDetails = () => {
    const {postIdNum} = useParams();
    const postId = FakeData.find(pd => pd.id=== postIdNum);
    console.log('postId', postId);
    return (
        <div>
            <h3>{postIdNum} no Post details</h3>
            <Post postId={postId}></Post>
        </div>
    );
};

export default PostDetails;

Комментарии:

1. возможно, ничто в FakeData не имеет a id: , которое соответствует postIdNum возвращенному from useParams() … в этом вопросе так много неизвестного — каково значение postIdNum в объекте, возвращаемом useParams()

2. Можете ли вы показать свой <Route> компонент в вопросе?

3. НИ один из поддельных данных не имеет значения id, вот моя ссылка на github, пожалуйста, проверьте и ответьте, github.com/saakeeb/material-ui-react

4. Кроме того, строго глядя только на вашу ошибку, кажется, что проблема в Post компоненте, а не PostDetails в том, пробовали ли вы использовать отладчик?

5. Я получаю значение компонента «post» из родительского компонента Home.js

Ответ №1:

postIdNum Полученное из useParams() является строковым значением, и из-за сравнения целочисленного значения со строковым значением find() возвращает значение undefined.

При преобразовании строкового значения postIdNum в целочисленное значение использование parseInt() решает проблему.

Кроме того, в FakeData.json не вызывается свойство объекта key , поэтому сравнение значений с неопределенным свойством также приведет к неопределенному возврату.

Попробуйте выполнить код,

 import React from 'react';
import { useParams } from 'react-router-dom';
import FakeData from '../FakeData/FakeData';
import Post from '../Post/Post';

const PostDetails = () => {
    const {postIdNum} = useParams();
    const postId = FakeData.find((pd) => pd.id === parseInt(postIdNum));
    console.log('postId', postId);
    console.log(Object.values(postIdNum));
    
    return (
      <div>
        <h3>{postIdNum} no Post details</h3>
        <Post posts={postId}></Post>
      </div>
    );
};

export default PostDetails;

Комментарии:

1. Спасибо, Мускан Бхай, я получаю postID, но все же компонент «post» показывает «невозможно реструктурировать название свойства pros.posts»

2. Я попробовал приведенный выше код, и он отлично сработал для меня. Вы можете проверить, есть ли какие-либо другие проблемы с запуском кода. Ссылка на изображение . Просто для информации, я девушка :).

3. Спасибо. Я выяснил, что в моем vscode есть ошибка ввода. И извините, что упомянул вас «Bhai», Apu.

Метки: