Question

我想问为什么子组件（ComponentWillMount（））只在一次onClick上传递一次道具后才被渲染一次。

一旦我单击一些将道具传递给孩子的按钮，则仅在第一次单击中，孩子的ComponentWillMount（）不会再次触发。

父组件：

render(){
return(
                <div>
                    <AppModuleForm 
                    editID = {this.state.editID}
                    editURL = {this.state.editURL}
                    editConf = {this.state.editConf}
                    editDesc = {this.state.editDesc}
                    editIcon = {this.state.editIcon}
                    editParent = {this.state.editParent}
                    editOrder= {this.state.editOrder}
                    status={this.state.status} 
                    moduleList={this.state.moduleList}  
                    updateAppModuleTree={this.updateAppModuleTree.bind(this)}/>
                </div>
)
}

子组件：

constructor(props){
        super(props)
        console.log(this.props.editDesc)
        this.state={
            url:'',
            description:'',
            parentID:'',
            order:'',
            configuration:'',
            icon:'',
            parentIDList:[],
            urlDuplicate: false,
            isSuccess: false,
            errorMessage: '',
        }

    }

    componentWillMount(){
        if(this.props.status==='edit'){
            let {
                editURL,
                editDesc,
                editParent,
                editConf,
                editIcon,
                editOrder} = this.props

            this.setState({
                url:editURL,
                description:editDesc,
                parentID:editParent,
                order:editOrder,
                configuration:editConf,
                icon:editIcon,
            })
        }
    }

Answer 1

首先，您需要阅读https://reactjs.org/docs/state-and-lifecycle.html 并了解在何处使用props以及为什么需要将某些内容传递到组件state中。

来自http://lucybain.com/blog/2016/react-state-vs-pros/

那么您什么时候使用state？

当组件需要跟踪渲染之间的信息时   组件本身可以创建，更新和使用状态。

因此，您不应将任何在组件生命周期内不会发生内部更改的状态转移到状态。正如我所看到的，传递给组件的所有道具很可能不会在组件内更改，应该从组件jsx中的道具获取的所有回调和图标。

如果您有一些可编辑的数据从父级传递到其道具，则在组件安装（使用componentWillMount()）中，您可以将该数据复制到组件状态。这意味着所有数据将在内部存储在组件中，并且将不会在传递的render()的每个props调用中被覆盖。如果需要检查新的props是否包含更改，则可以使用componentWillReceiveProps(newProps)，在那里可以将newProps与this.props进行比较，并根据需要处理更改。

我还建议您根据命名最佳做法重命名组件回调处理程序：

<div>
            <AppModuleForm 
                handleEditID = {this.onEditID}
                handleEditURL = {this.onEditURL}
                handleEditConf = {this.onEditConf}
                handleEditDesc = {this.onEditDesc}
                handleEditIcon = {this.onEditIcon}
                handleEditParent = {this.onEditParent}
                handleEditOrder= {this.onEditOrder}
                status={this.state.status} 
                moduleList={this.state.moduleList}  
                updateAppModuleTree={this.updateAppModuleTree.bind(this)}/>
            </div>

我看不到任何合理的目的来声明或将功能存储在组件状态。因此，您可以考虑移动您的处理程序this.state.editID
等等到父组件this范围。这样

onEditId = () => { /* function code */ }

如果您使用箭头功能= () =>，它会自动绑定到组件this，并且您不需要像在

中那样手动绑定它们

{this.updateAppModuleTree.bind（this）}

毕竟，您将更加清楚地了解如何管理组件的生命周期，而问题将不再重要。

Answer 2

 componentWillReceiveProps(nextProps){
   if(nextProps.status != this.props.status){
        if(this.props.status==='edit'){
            let {
                editURL,
                editDesc,
                editParent,
                editConf,
                editIcon,
                editOrder} = this.props

            this.setState({
                url:editURL,
                description:editDesc,
                parentID:editParent,
                order:editOrder,
                configuration:editConf,
                icon:editIcon,
            })
        }
      }
    }

ComponentWillMount 是安装生命周期方法，它将在安装组件之前被调用，因此可以初始化，因为在更改道具后将调用 ComponentWillReceiveProps ，您将获得更改nextProps参数。

通过Props后的ReactJS ComponentWillMount（）

2 个答案: