当从 mapStateToProps 返回整个流对象时，为啥不呈现流标题？

Posted 2023-02-21

【中文标题】当从 mapStateToProps 返回整个流对象时，为啥不呈现流标题？

【英文标题】：Why stream title is not rendering when whole stream object is returned from mapStateToProps?当从 mapStateToProps 返回整个流对象时，为什么不呈现流标题？

【发布时间】：2020-08-15 23:43:28

【问题描述】：

我从过去两周开始学习 React。目前我正在学习 Stephen Grider 的 Udemy 课程。 我正在构建一个类似于 twitch 的虚拟流媒体平台，我可以在其中创建、删除、编辑和观看流媒体。

现在我正在编写 StreamDelete 组件，该组件将显示一个模式，用户可以在其中删除特定流或取消。

这是我写的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React from "react";
import Modal from "../modal";
import history from "../../history";
import  connect  from "react-redux";
import  fetchIndividualStream  from "../../actions";

class streamDelete extends React.Component 
  componentDidMount() 
    this.props.fetchIndividualStream(this.props.match.params.id);
  

  action = () => 
    return (
      <React.Fragment>
        <button className="ui button negative">Delete</button>
        <button className="ui button">Cancel</button>
      </React.Fragment>
    );
  ;

  renderContent = () => 
    return `Are you sure you want to delete : $
      this.props.streams
        ? this.props.streams[this.props.match.params.id].title
        : ""
    `;
  ;

  render() 
    return (
      <Modal
        title="Delete Stream"
        content=this.renderContent()
        action=this.action()
        onDismiss=() => history.push("/")
      />
    );
  


const mapStateToProps = (state) => 
  return  stream: state.streams ;
;

export default connect(mapStateToProps, 
  fetchIndividualStream,
)(streamDelete);

这里 fetchIndividualStream 操作将获取要从 API 中删除的流并将其存储在状态中。 此操作后的 redux store 如下所示

我得到的输出：

输出应该是什么： 当组件第一次渲染状态为 null 以及成功获取流时，模式将出现。唯一的区别是成功获取后标题将显示在“您确定要删除：”之后。请参阅renderContent 方法。

我的问题是，即使在状态像第一张图像一样更新后，模态也不显示标题。我不知道这个问题，但是在更改一些代码时它起作用了。

我所做的更改是在 mapStateToProps 和 renderContent 方法中。

ma​​pStateToProps

const mapStateToProps = (state, ownProps) => 
   return  stream: state.streams[ownProps.match.params.id] ;
 ;

renderContent 方法：

renderContent = () => 
    return `Are you sure you want to delete : $
       this.props.stream ? this.props.stream.title : ""
     `;
   ;

编辑：Link to the Github repository

【问题讨论】：

你需要从 react-router-dom 导入的withRouter

【参考方案1】：

您似乎正在使用react-router-dom 并想从网址获取参数？

您需要使用withRoute HOC 才能访问.match / this.props.match.params.id。请参考以下示例。

文档：https://reacttraining.com/react-router/core/api/withRouter 连接(mapStateToProps, mapDispatchToProps)(withRouter(Dashboard))

import React from "react";
import PropTypes from "prop-types";
import  withRouter  from "react-router";

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component 
  static propTypes = 
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  ;

  render() 
    const  match, location, history  = this.props;

    return <div>You are now at location.pathname</div>;
  


// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

因此，在您的特定情况下，您需要这样做。

export default connect(mapStateToProps, 
  fetchIndividualStream,
)(withRouter(streamDelete)); // withRouter higher order component.

【讨论】：

为什么我不能直接从组件访问 this.props.match.params.id。还有为什么我后来的修改有效？

以后修改什么？

在 mapStateToProps 函数和 renderContent 方法中。我在我的问题中提到了这一点。

如果不看整个应用程序，我很难说。如果你喜欢，你可以把它放在codesandbox.io上，这样可以更深入地了解一下。根据您提供的代码，您有这个this.props.stream.title，这与this.props.streams[this.props.match.params.id].title 不同。您可能正在通过某些操作在某处设置streams.title？但这不是来自路由参数。

this.props 指的是从父级传递的属性。例如<streamDelete match=> 我相信你没有在父母中设置它。您不仅可以访问未传递的属性。 withRouter 高阶组件设置该属性。 more on this