react WillReceiveProps中state问题

Question

class IssueRecordUpload extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
          filters: {},
        }
        
    }
    static propTypes = {
        filters: PropTypes.object,
        dispatch: PropTypes.func
    }
    
      componentDidMount() {
        const {filters} = this.props
        this.setState({
          filters: filters
        }, () => {
          this.load()
        })
      }
      
      componentWillReceiveProps(next) {
        const {filters} = this.state   // filters = undefined
        if (filters.toString() !== next.filters.toString()) {
          this.setState({
            filters: next.filters,
          }, () => {
            this.load()
          })
        }
      }
      
       load = () => {
        const {dispatch} = this.props
        const {filters} = this.state
        dispatch(filters)
      }

}

filters和dispatch是父组件传进来的，DidMount的时候setState() props.filter -> state.filters，在WillReceiveProps中再接收新的props，发现原有state.filters为undefined，并且setState失败，但是next.filters是存在的，求解是什么原因。谢谢大佬!

Answer 1

先答题：

就你目前这些代码来看，问题应该在componentDidMount中。
因为在constructor中this.state.filters是一个空对象，当走过componentDidMount后，在componentWillReceiveProps取值时却成了undefined,那么很可能是你在componentDidMount执行this.setState({ filters: filters })时，filters变量，也就是this.props.filters的值就是undefined。

提几点个人看法，可供参考：

• 为什么要在componentDidMount时从this.props上取值并赋值给this.state呢，在我看来，这一步完全可以放到constructor中去做。
• load方法就你目前这些代码来看，不应该放在你的IssueRecordUpload组件上，而应该放到父组件中去处理，并将处理好的filters交给IssueRecordUpload就好了。

Answer 2

如果一切都如你所说所想, 那么你没有检验的一件事就是 componentDidMount 中的 props.filters 是否有值, 父组件如果一开始传递的 filters 就是 undefined, 那么一切都是那么的正常.