React之componentWillReceiveProps第一次不会触发

componentWillReceiveprops在第一次接收到父组件传来的props值时是不会发生改变的，只有当第二次props的值发生改变时才会触发该函数。

但是我们需要在第一次就触发该生命周期函数。

解决的办法：

在componentDidMount中调用setState方法，重新将接收到的props值进行赋值，将接受到的值直接赋给state中里面的属性，虽然这种操作依然没有解决componentWillReceiveProps第一次不会触发的问题，但是相当于props收到父组件传过来的值时直接赋给state（相当于设置了默认值），不需要触发componentWillReceiveProps，当第二次收到新值了，componentWillReceiveProps也就被触发了，再相应的操作setState方法。

情况二：当接收到后端数据，并且将接收到后端的数据传给子组件时，子组件的props第一次接收到的值为空值。

原因：因为是在componentDidMount中调用接口，而组件实例时，执行的顺序componentDidMount是在render之后执行的。而在A组件执行render以后，不会立即执行A组件的componentDidMount函数，而是去执行B组件了，所以第一次传值是空值。

A组件加载B组件的时的顺序如上图：

实例：

B组件的代码：

其中在componentDidMount中执行一次setState函数，第一不通过componentWillReceiveProps进行赋值，当componentWillReceiveProps触发后在进行相应的setState操作。

import React, { Component } from 'react'
import '../../assets/css/ThirdPage.scss'
export default class ThirdPage extends Component {
    constructor(props) {
        super(props)
        console.log('props',this.props.childList);
        this.state = {
            SecondList: [],
            menuList: []
        }
    }
    componentDidMount(){
       console.log('--B--componentDidMount----');
       if(this.props.childList.length!==0){
            this.setState({
                SecondList:this.props.childList
            })
       }
    } 
    UNSAFE_componentWillReceiveProps(nextProps) {
        // console.log('nextProps',nextProps);
        if(nextProps.childList){
            this.setState({
                SecondList:nextProps.childList
            })
        }else{
            this.setState({
                SecondList:[]
            })
        }
    }

    render() {
        console.log('--B---render------');
        const {SecondList} = this.state
        return (
            <div className='SecondBox' >
                {
                  SecondList.map(item=>{
                    return <div className='SecondBox-item' key={item.id}>
                        <div>
                            <img src={item.extra} alt="" style={{width:'60px',height:'60px',borderRadius:'50%'}} />
                        </div>
                        <div>
                            {item.name}
                        </div>
                
                    </div>
                  })  
                }
            </div>
        )
    }
}

A组件代码：

import React, { Component } from 'react'
import ThirdPage from '../components/category/ThirdPage'
import NotFoundGoods from '../components/category/NotFoundGoods'
import '../assets/css/category.scss'
export default class category extends Component {
    constructor(props){
        console.log('-----A---props----',props);
        super(props)
        this.state = {
            menuList:[],
            SecondList:[],
            index:0
        }
    }
    componentDidMount(){
        console.log('----A--componentDidMount----');
        this.getMenuList()
    }   
  async getMenuList(){
    const {data} = await window.$http.category.getCategoryData()
    console.log(data[0].child);
    this.setState({
        menuList:data,
        SecondList:data[0].child
    })
    }
sendIndex=(index)=>{
       
        this.setState({
            index:index,
            SecondList:this.state.menuList[index].child
        },()=>{
            console.log(this.state.menuList[index].child);
        })
    }
  render() {
    console.log('----A--render------');
    const {menuList,SecondList,index} = this.state
    return (
      <div className='categoryPageBox'>
        <div className="categoryPageBox-left">
            {
                menuList.map((item,index)=>{
                    return <div key={item.id} className='singleMneu' onClick={()=>{this.sendIndex(index)}}>
                        {item.name} 
                    </div>
                })
            }
        </div>
        <div className="categoryPageBox-right" >
            {SecondList? <ThirdPage index={index} childList={SecondList}></ThirdPage>:<NotFoundGoods></NotFoundGoods>}
        </div>
      </div>
    )
  }
}