直接导航到组件时未呈现道具 - React Redux答案

【问题标题】：Props not rendered when navigating to component directly - React Redux直接导航到组件时未呈现道具 - React Redux
【发布时间】：2020-07-12 06:41:51
【问题描述】：

我有一个 react 子组件的问题，使用 redux 和 react-router。

我通过 this.props.match.params 从 URL 获取一个值，以对 componentDidMount 进行 API 调用。我正在使用 this.props.match.params，因为如果有人直接导航到此特定 URL，我想在我的内容中使用来自 API 的数据。

当我通过单击 a 导航到组件时，组件呈现正常。 API 通过 action 调用，reducer 将数据分发给相关的 prop。

当我通过点击 URL 直接导航到组件时，API 被调用（我可以在 devtools 的 Network 部分看到它被调用），但是数据没有被分派到相关的道具，我没有看到我期望的内容。我希望通过使用 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);

【问题讨论】：

你能在console.log(this.props.match.params.id) 和ComponentDidMount 中使用相关的reducer 吗？看起来对吗？
是的，当我点击链接时看起来正确，但是当我直接导航到该页面时，我的控制台中看不到任何登录。
我得到的错误是 TypeError: cannot read property of undefined，这表明问题出在组件挂载之前的渲染函数中。这也向我表明 if 语句被忽略......即使 this.props.content 不存在该语句在渲染时被忽略并且 else 语句被返回。我真的对此感到困惑。
直接导航时是否看到“内容加载”？
你还没有将this绑定到renderContent

标签： javascript reactjs redux react-router

【解决方案1】：

尝试将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

【讨论】：

console.log(action) 在 reducer 中是一个有用的技巧：）谢谢！我试过这个，但我仍然遇到同样的问题。我添加... constructor(props) { super(props); this.renderContent = this.renderContent.bind(this); } 但仍然没有喜悦
你永远不会得到<p>Content loading</p> 呈现在ui 中？
当我直接点击页面时，UI 根本不呈现。 renderContent() 肯定在运行，但它正在尝试运行 else 语句，因此出现错误 TypeError: cannot read property title of undefined，它指的是控制台中的
{this.props.content.title}
我可以看到 this.props.content 返回未定义，并且没有向 API 发出网络请求。当我通过反应路由器（单击链接元素）点击页面时，页面按预期呈现。
直接点击页面时，我可以看到记录到控制台的操作为 {type: "@@redux/INIT7.9.k.6.wx"} type: "@@redux/INIT7 .9.k.6.wx" proto：在我看来，renderContent 运行条件不正确.. 尝试在满足 if 条件和 this.props.content 时运行 else 语句不存在...这会阻止组件挂载（因此不调用 API）
你能用“hello World”替换{this.renderContent()} - 只是为了确保这个组件呈现。也许组件树中还有其他一些条件将这个组件排除在渲染之外。我关心的另一件事是class Component extends React.Component {。让我们将其重命名为其他名称（例如 MyComponent）。不要忘记更新导出。

【解决方案2】：

我已解决问题，非常感谢您的帮助！

原来 API 请求返回了一个数组，而我的操作是将这个数组分派到 props.content。这个特定的 API 调用将始终返回一个只有一个值的数组（根据文档，它旨在返回一个条目……但由于某种原因，它以数组的形式返回！）。我期待一个对象，所以我把它当作这样。我将数组转换为我的减速器中的一个对象，现在它的行为应该如此。

所以总的来说我的数据结构有问题。

【讨论】：