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

Posted 2023-02-21

【中文标题】直接导航到组件时未呈现道具 - React Redux

【英文标题】：Props not rendered when navigating to component directly - 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

【参考方案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，它指的是控制台中的

直接点击页面时，我可以看到记录到控制台的操作为 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 调用将始终返回一个只有一个值的数组（根据文档，它旨在返回一个条目……但由于某种原因，它以数组的形式返回！）。我期待一个对象，所以我把它当作这样。 我将数组转换为我的减速器中的一个对象，现在它的行为应该如此。

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