Question

尝试从我的网址抓取id，以便我可以将其用于componentDidMount上的fetchData。我也用它在组件中设置一些状态来显示页面上的信息。但是，ownProps.match和ownProps.params都是未定义的。我已经尝试了很多东西，我能想到的是我的/ route在事物/：id之前匹配并且它导致了问题？

（我可以使用其中之一，但它们会失败）。 TypeError: this.props.params is undefined TypeError: this.props.match is undefined

以下是我的路线：

export default (
  <Route path="/" component={App}>
    <Route path="login" component={requireNoAuthentication(LoginView)} />
    <Route path="register" component={requireNoAuthentication(RegisterView)} />
    <Route path="home" component={HomeContainer} />
    <Route path="thing/:id" component={ThingContainer} />
    <Route path="category" component={CategoryContainer} />
    <Route path="analytics" component={requireAuthentication(Analytics)} />
    <Route path="basic" component={requireNoAuthentication(BasicContainer)} />
    <Route path="*" component={DetermineAuth(NotFound)} />
  </Route>
);

mapStateToProps here（我通常一直在评论thing，直到我能找出问题所以可以忽略那个问题）。我真正看到的问题是const {id}部分。

function mapStateToProps(state, ownProps) {
  console.log(ownProps);
  return {
    data: state.data,
    token: state.auth.token,
    loaded: state.data.loaded,
    isFetching: state.data.isFetching,
    isAuthenticated: state.auth.isAuthenticated,
    thing: state.things[ownProps.match.params.id],
  };
}

这是我的组件让我头痛的地方。

 @connect(mapStateToProps, mapDispatchToProps)
    export class Thing extends Component {
      constructor(props) {
        super(props);
      }

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

顺便说一下，当我console.log以上时，ownProps就会很好。然而，它缺少任何参与/匹配，这使得我在预期匹配之前匹配路线？这可能是荒谬的，因为我不能做一个嵌套的路线而不会丢失我的react-router参数？

我现在已经到了这个地步，我已经开始了这么长时间以至于我失去了焦点。转向一些很有帮助的人！

应用程序是反应15.3，react-router v3，redux。

Answer 1

我看到你渲染“ThingContainer”但是你的类是“Thing”。你在哪里使用HOC？你还记得把所有道具传给孩子吗？

示例：

const ThingContainer = (props) => <Thing ...props />

Answer 2

props返回的mapStateToProps()对象应包含ownProps.match，如果您想在组件中使用它。将其添加为另一个属性，或将ownProps合并到要返回的对象中。

OwnProps Match和Params未定义React-Router V3

2 个答案: