javascript - 为什么 React 要求在静态 propTypes 中重复使用 props？

Question

运行我的代码测试后，React 说缺少一些 props。所以最后我有这个

  static propTypes = {
    'payoutInfo'                    : React.PropTypes.object,
    'payoutInfo.sideBetPayouts'     : React.PropTypes.arr,
    'payoutInfo.sideBetPayouts.map' : React.PropTypes.func,
  }

让我告诉你代码来自哪里

这里是 Action 。 (我正在使用 Flux)

class PayoutLimitActions {

  constructor () {
    this.generateActions('payoutsInfo');
  }

  payoutsInfo (payoutArray) {
    this.actions.payoutsInfo(payoutArray);
    this.dispatch();
  }
}

export default PayoutLimitActions;

这里是商店

import PayoutLimitActions from 'actions/PayoutLimitActions';

@createStore(flux)
class PayoutLimitStore {

  constructor () {
    this.state = {
      payoutProp : localStorage.getItem('payoutArray') ? JSON.parse(localStorage.getItem('payoutArray')) : [],
    };
  }

  @bind(PayoutLimitActions.payoutsInfo)
  payoutsInfo (payoutArray) {
    this.setState({
      payoutProp : payoutArray,
    });
    localStorage.setItem('payoutArray', JSON.stringify(payoutArray));
  }
}

export default PayoutLimitStore;

这里我有一个AuthStore，我在其中使用PayoutLimitActions

axios.post(`${API_ENDPOINT}`, credentials)
  .then( (response) => {
    PayoutLimitActions.payoutsInfo(response.data.lobbyData);
    this.actions.authSuccess({...response.data, ...credentials});
  })

这里是组件

  <TableLimitsTooltip {...{
    payoutProp : this.props.payoutProp,
  }} />

那么，为什么会发生这种情况？

Answer 1

查看组件代码(而不是其使用)会更有用，这样可以更好地了解您在内部实际使用的 Prop 以及它们的调用方式。

无论如何，您定义对象类型的方式存在错误。您必须使用shape type .

static propTypes = {
  payoutInfo: React.PropTypes.shape({
    sideBetPayouts: React.PropTypes.array
  })
}

另外，请注意

• Array 的 PropType 是 PropTypes.array
• 无需为 Array.prototype.map 方法定义 PropTypes