Question

我想设置一个嵌套对象的状态，我尝试了this answer，但我不知道每次setState跟着答案，状态仍未设置

这是我尝试过的代码：

// declare the state
constructor(props){
  super(props); 
  this.state = {
    bius: {name:'bius', time:0, status:false},
  }
}

// Function to setstate
_timer(name){
    // this.setState({[name]: !this.state.name})
  var upd = {...this.state[name]}
  upd.status = !upd.status
  console.log(upd.status)
  console.log(this.state.bius)
  this.setState({upd})
  console.log("setstate upd")
  console.log(upd)
  console.log(this.state.bius)
}

// here I call the function to set state
<TouchableOpacity  onPress={()=>{this._timer('bius')}}>
  <Text style={[global.global.SubHeaderText, {color:'white'}]}>Start</Text>
</TouchableOpacity>

这里是log：

的输出

I/ReactNativeJS(6694): true
I/ReactNativeJS(6694): { name: 'bius', time: 0, status: false }
I/ReactNativeJS(6694): setstate upd
I/ReactNativeJS(6694): { name: 'bius', time: 0, status: true }
I/ReactNativeJS(6694): { name: 'bius', time: 0, status: false }

我不知道为什么upd.status已经true，而this.state.bius.status仍为false？

为什么this.state.bius.status未设置为true？

Answer 1

您需要绑定事件。阅读this react documentation

您还需要在此处使用spread operator并且仅更改您希望的密钥

this._timer.bind(this,'bius');
//..

this.setState(prevState => ({ 
   bius: {
      ...prevState.bius,
      status: !prevState.bius.status
}));

你也upd.status = !upd.status;因为状态没有改变而无法工作。你也需要在那里调用setState。在你的问题评论中提到的另一件事。如果您不打算绑定事件处理程序，则应使用箭头函数。

Answer 2

setState是异步函数。所以，如果你想打印你的状态，你应该在回调时调用console.log（）。例如：

this.setState({bius: {name:'example'}},()=>{console.log(this.state)})

Answer 3

this.setState() updates the state  asynchronously. That is why you do not see in console log. To get the log correctly add a console.log in render function as below .

export default class app extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bius: { name: 'bius', time: 0, status: false },
    }
  }

  // Function to setstate
  _timer(name) {
    var upd = { ...this.state[name] }
    upd.status = !upd.status
    this.setState({ bius: upd })
  }


  render() {
    console.log("MYLOG", this.state.bius)
    return (
      <TouchableOpacity style={{ margin: 100 }} onPress={() => { this._timer('bius') }}>
        <Text >Start</Text>
      </TouchableOpacity>
    )
  }
}

Answer 4

我认为你必须误解我this.setState({upd})

你可以采取另一种方式this.setState({bius:upd}) 尝试这个让我知道发生了什么。

React Native - set State嵌套对象无法正常工作

4 个答案: