Question

在运行我的代码测试后，React说有些道具丢失了。所以最后我有了这个

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

让我告诉你代码来自哪里

这是行动。（我正在使用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

查看组件代码而不是其用途会更有用，以便更好地了解您实际使用的道具以及它们的调用方式。

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

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

另外，请注意

PropType的{{1}}为Array
无需为PropTypes.array方法

为什么React要求在静态propTypes中重复道具？

1 个答案: