首页 文章

传递Props后的ReactJS ComponentWillMount（）

提问于
浏览 次
0

我想问一下为什么只有一次渲染子（ComponentWillMount（））组件，一旦我在onClick上每次都传递道具 .

一旦我点击了一个将道具传递给子项的按钮，子项的ComponentWillMount（）就不会再次触发，只能在第一次点击时触发 .

Parent Component:

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>
)
}

Child Component:

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,
            })
        }
    }
javascript reactjs

2 回答

  • 0

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

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

    所以你什么时候使用州？当组件需要跟踪渲染之间的信息时，组件本身可以创建，更新和使用状态 .

    所以你不应该转移到在组件实时循环期间内部不会改变的任何状态 . 我可以看到你传递给组件的所有道具很可能不会从组件中更改，所有回调和图标都应该从组件jsx中的props中获取 .

    如果您有一些可编辑的数据从父级传递到它的道具，则在组件装载（使用 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）}

    毕竟，您可以更清楚地了解如何管理组件生命周期，您的问题将不再适用 .

    回复于
  • 0
    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参数的更改 .

    回复于

相关问题