Question

我有以下智能组件，我指定initialUpload函数是必需的函数：

import React, { Component, PropTypes } from 'react';
import UploadForm from '../../components/UploadForm/UploadForm';
import HeaderSelection from '../../components/HeaderSelection/HeaderSelection';
import { initialUpload } from '../../redux/modules/Upload';
import { connect } from 'react-redux';

console.log(typeof initialUpload); //function

@connect((state) => {
  return {
    file: state.getIn(['upload', 'file'])
  };
}, {
  initialUpload
})
export default class Home extends Component {
  static propTypes = {
    initialUpload: PropTypes.func.isRequired
  };

  render() {
    return (
      <div>
        <UploadForm handleFilesChange={this.props.initialUpload}/>
        <HeaderSelection/>
      </div>
    );
  }
}

但我收到错误消息：

warning.js：36警告：道具类型失败：道具initialUpload是标记为Connect(Home)中的必填项，但其值为undefined。

该函数包含在dispatch中并传递给组件层次结构，因此我对发生的事情感到困惑。

Answer 1

@connect正在将static propTypes分配给生成的振打组件，而不是Home本身，这是一种奇怪的行为！我认为它是由ES7转换引起的，此行为在以前的版本中不存在

解决方法是在类定义外的wrappedComponent上定义propTypes：

@connect(...)  
export default Home extends Component{  
    render() {  
        // ....  
    }  
}  

Home.WrappedComponent.propTypes = {  
    initialUpload: PropTypes.func.isRequired  
}

另一种选择是不使用装饰器＆amp;直接使用连接

从连接装饰器传递下来的操作最初是未定义的

1 个答案: