Question

大家下午好。我遇到了无法解决的问题。

我试图按照 documentation 的要求在 SO 上找到答案，但到目前为止都失败了。

ownProps 返回未定义。这是“祖父母”（主页）：

      {<Switch>
        <Route exact path="/computers">
          <MacBookList />
        </Route>
        <Route path="/computers/:id" component={MacBookCard}>
          <MacBookCard />
        </Route>
      </Switch>}

这是 MacBookCard，一个“孙子”：

import React from 'react'
import { fetchMacBooks } from '../actions/macBookActions';
import { connect } from 'react-redux'
const MacBookCard = (macbook) => {

return (
    <div>
        ...
    </div> 
    )
  }
  const mapStateToProps = (state, {ownProps}) => {
      console.log(state)
      console.log(ownProps)
  }
  const dispatchToProps = (dispatch) => {
    return {
      fetchMacBooks: () => dispatch(fetchMacBooks())
    }
  }
  

  export default connect (mapStateToProps, dispatchToProps)(MacBookCard)

非常感谢您的洞察力！

Answer 1

根据上面 Nick 的回答，您仍然可以直接从参数列表中进行解构，但要确保您声明的 prop 名称实际上被组件使用。

 const mapStateToProps = (state, { id, macbook }) => {
      console.log(state);
      console.log(id); // should be a valid prop of MacBookCard
      console.log(macbook); // should be a valid prop of MacBookCard
  }

mapStateToProps ownProps 返回 undefined

1 个答案: