componentWillReceiveProps vs getDerivedStateFromProps [英] componentWillReceiveProps vs getDerivedStateFromProps

问题描述

究竟componentWillReceiveProps和getDerivedStateFromProps对我来说是一个微妙的问题。因为，我在使用getDerivedStateFromProps时遇到了一个问题：

What exactly componentWillReceiveProps and getDerivedStateFromProps are subtle question for me. Because, I just came across to an issue while using getDerivedStateFromProps:

// Component 
state = {
  myState: []
}

// Using this method works fine:

componentWillReceiveProps(nextProps) {
  this.setState({
    myState: nextProps.myPropsState
  })
}

// But using this method will cause the checkboxes to be readonly:

static getDerivedStateFromProps(nextProps,prevProps) {
  const { myPropsState: myState } = nextProps
  return {
    myState
  }
}

// And here's checkbox
<input type="checkbox" id={`someid`} 
 onChange={(e) => this.handleMethod(e, comp.myState)} 
 checked={myState.indexOf(comp.myState) > -1} />

反应版本：16.4.1

推荐答案

最后，我解决了我的问题。这是一个痛苦的调试：

Finally, I resolved my issue. It was a painful debugging:

// Child Component

// instead of this
// this.props.onMyDisptach([...myPropsState])

// dispatching true value since myPropsState contains only numbers
this.props.onMyDispatch([...myPropsState, true])

这是因为，我有两个条件：1）复选框更改（组件）2 ）按下复位按钮（子组件）

This is because, I have two conditions: 1) on checkbox change (component) 2) on reset button pressed (child component)

我需要在按下复位按钮时重置状态。因此，在将状态调度到props for reset按钮时，我使用布尔值来知道它是重置的更改。您可以使用任何您喜欢但需要跟踪的内容。

I was needing to reset the states when reset button is pressed. So, while dispatching state to the props for reset button, I used a boolean value to know it's a change from the reset. You may use anything you like but need to track that.

现在，在组件中，我在调试控制台输出后发现了一些关于componentWillReceiveProps和getDerivedStateFromProps之间差异的提示。

Now, here in the component, I found some hints to the differences between componentWillReceiveProps and getDerivedStateFromProps after debugging the console output.

// Component
static getDerivedStateFromProps(props, state) {
    const { myPropsState: myState } = props
    // if reset button is pressed
    const true_myState = myState.some(id=>id===true)
    // need to remove true value in the store
    const filtered_myState = myState.filter(id=>id!==true)
    if(true_myState) {
      // we need to dispatch the changes to apply on its child component
      // before we return the correct state
      props.onMyDispatch([...filtered_myState])
      return {
        myState: filtered_myState
      }
    }
    // obviously, we need to return null if no condition matches
    return null
  }

以下是我发现的控制台输出结果：

• 每当道具发生变化时，getDerivedStateFromProps会立即记录

• getDerivedStateFromProps logs immediately whenever props changes

componentWillReceiveProps仅在子传播道具变化后记录日志

componentWillReceiveProps logs only after child propagates props changes

getDerivedStateFromProps不响应道具更改（我的意思是调度更改，如示例代码所示）

getDerivedStateFromProps doesn't respond to the props changes ( I meant for the dispatch changes as in the example code)

componentWillReceiveProps响应道具变化

componentWillReceiveProps responds to the props changes

因此，我们需要在使用getDerivedStateFromProps时向子组件提供更改。

Thus, we needed to supply the changes to child component while using getDerivedStateFromProps.

在我需要的状态下粘贴真值的过程因为getDerivedStateFromProps处理所有更改，而不像componentWillReceiveProps处理只有子组件将更改调度到props。

The process of pasting true value in the state I require because getDerivedStateFromProps handle all the changes unlike componentWillReceiveProps handles only the child component dispatches the changes to the props.

顺便说一句，您可以使用自定义属性来检查它是否已更改并更新值getDerivedStateFro mProps但由于某种原因我不得不调整这种技术。

By the way, you may use custom property to check if it is changed and update the value if getDerivedStateFromProps but for some reason I have to tweak this technique.

我的措辞可能有些混乱，但我希望你能得到它。

There might be some confusion on my wording but I hope you'll get it.

这篇关于componentWillReceiveProps vs getDerivedStateFromProps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！