Реквизит не отображается при переходе к компоненту напрямую - React Redux

Question

У меня проблема с реагирующим дочерним компонентом, использующим redux и реагирующий маршрутизатор.

Я получаю значение из URL через this.props.match.params, чтобы выполнить вызов API для componentDidMount , Я использую this.props.match.params, так как хочу использовать данные из API в моем контенте, если кто-то переходит на этот конкретный URL-адрес напрямую.

Когда я перехожу к компоненту, щелкая компонент оказывает хорошо. API вызывается с помощью действия, а редуктор отправляет данные в соответствующий объект.

Когда я перехожу к компоненту напрямую, нажимая URL, вызывается API (я вижу, что он вызывается в разделе «Сеть»). of devtools), но данные не отправляются в соответствующие реквизиты, и я не вижу ожидаемого контента. Я надеялся, что используя this.props.match.params для передачи значения в вызов API, я смогу напрямую обратиться к компоненту и получить данные из ответа API, отображаемые так, как я хочу.

Ниже мой компонент код. Я подозреваю, что что-то не так с моим утверждением if ... однако оно работает, когда я перехожу к компоненту, щелкая ссылку в моем приложении React.

Чего мне не хватает?

    import React from 'react';
    import { connect } from 'react-redux';
    import { fetchData } from '../../actions';


    class Component extends React.Component {

        componentDidMount() {
            this.props.fetchData(this.props.match.params.id);
        }

        renderContent() {
            if(!this.props.content) {
                return ( 
                    <article>
                        <p>Content loading</p>
                    </article>
                )
            } else {
                return (
                    <article>
                        <h2>{this.props.content.title}</h2>
                        <p>{this.props.content.body}</p>
                    </article>

                )
            }
        }

        render() {
            return (
                <>
                    <div className='centered'>
                        {this.renderContent()}
                    </div>
                </>
                )
        }
    }

    const mapStateToProps = (state) => {
        return { post: state.content };
    }
    export default connect(mapStateToProps, { fetchData: fetchData })(Component);

Answer 1

Я исправил проблему, огромное спасибо за вашу помощь!

Оказалось, что запрос API возвращал массив, и мое действие отправляло этот массив в props.content. Этот конкретный вызов API всегда будет возвращать массив только с одним значением (в соответствии с документацией он предназначен для возврата одной записи ... но по какой-то причине возвращает ее в массиве!). Я ожидал какого-то предмета, поэтому относился к нему как к такому. Я преобразовал массив в объект в моем редукторе, и теперь он ведет себя как следует.

Таким образом, в целом возникла проблема с моей структурой данных.

Answer 2

Попробуйте обновить renderContent до этого:

        renderContent = () => {
            if(!this.props.content) {
                return ( 
                    <article>
                        <p>Content loading</p>
                    </article>
                )
            } else {
                return (
                    <article>
                        <h2>{this.props.content.title}</h2>
                        <p>{this.props.content.body}</p>
                    </article>

                )
            }
        }

Похоже, вы забыли привязать this к renderContent