Question

在React中，this.setState方法设置状态。例如下面我将name的状态设置为Thomas。

this.setState({'name': 'Thomas'})

我需要另一个对象。由其他州财产组成的州财产。例如下面。

let name = 'Thomas'
this.setState({name})

console.log(this.state.data) // => undefined

let age = '26'
let data = {age}
this.setState(data)

console.log(this.state.data) {data: {age: '26'}}

this.stateChanged(state => {
  let data = state.data || {}
  if (state.name) data.name = state.name
  this.setState({data})
})

this.setState({name})

console.log(this.state.data) // => {data: {age: '26', name: 'Thomas'}}

React中是否有任何等效的this.stateChanged方法？

Answer 1

React为我们提供了几个明确的选项来确定状态何时发生变化，或者组件是否已更新。第三种选择更多地是针对您的特定情况的隐含方法：

使用setState(function|object nextState, [function callback])中提供的回调：
```
onClick(e) {
    this.setState({
        foobar: e.target.value
    }, this.doAfter)
}
doAfter() {
    console.log(`Just set FOOBAR to ${this.state.foobar}`)
}
```
根据documentation，我们可以依赖于在异步设置状态后调用此方法。
使用componentDidUpdate生命周期方法：
```
componentDidUpdate() {
    console.log(`Component updated: Foobar is ${this.state.foobar}`) 
}
```
根据documentation，在组件自身呈现后立即调用此函数，从而保证我们可以访问最新的状态更改。
在state方法中编译所有必要的render()信息。
```
render() {
    const compilation = {foobar: `${this.state.foobar}-bar`}
    return (
         <div>...</div>
    )
}
```
基本上，只需在从render()返回JSX对象之前，将对象组合成您喜欢的对象，但上面的前两个选项可能更适合您的需求。

示例

http://codepen.io/mikechabot/pen/KzyVVw?editors=0011

设置状态时的事件

1 个答案: