反應：狀態對象屬性未更新

Question

我正在嘗試更新我的狀態，但與此同時，當我在控制台中控制更新的狀態值時，它會給我一條消息，表明您的狀態值是undefined 。 有人可以幫助我如何解決這個問題。 我正在使用rc-time-picker picker 選擇時間並將所選時間存儲在 localstorage 中，但它沒有更新狀態值謝謝

代碼

import 'rc-time-picker/assets/index.css';
import React, { Component } from 'react';

import TimePicker from 'rc-time-picker';
import moment from 'moment';

const format = 'h:mm a';



const now = moment().hour(0).minute(0);

class Time extends Component {

  constructor(){
    super();
    this.state={
      value : ''
    }
  }

  newHandleChange=(value)=>{
    this.setState({
        value:   localStorage.setItem("currentTime",value.format('h:mm a'))
    })

}
  render(){
    console.log("state data",this.state.value)

    return(
      <div>
           <TimePicker
                  showSecond={false}
                  defaultValue={now}
                  className="xxx"
                  onChange={this.newHandleChange}
                  format={format}
                  use12Hours
                  inputReadOnly
                  fieldName="time"
                />
      </div>
    )
  }
}

export default Time;

Answer 1

您獲得undefined的原因是因為您正在使用從調用localStorage.setItem返回的值設置新狀態，該值是undefined 。

以下是您需要做的事情：

class Time extends Component {
  constructor(props) {
    super(props)
    this.state = { value: '' }
  }

  // ...

  newHandleChange = (value) => {
    const time = value.format('h:mm a')

    localStorage.setItem('currentTime', time)
    this.setState({
      value: time
    })
  }
}

這樣，您將新時間保存到一個變量中，並使用它來更新localStorage currentValue和組件中的state 。

Answer 2

在constructor初始化state ，您應該將props傳遞給super ：

  constructor(props){
    super(props);
    this.state={
      value : ''
    }
  }

你得到的undefined只是getItem()的結果

Answer 3

您需要為狀態設置正確的值，請檢查以下代碼

  newHandleChange=(value)=>{
    localStorage.setItem("currentTime",value.format('h:mm a')) // if you really needs the local storage.

    this.setState({
        value: value.format('h:mm a')
    })
  }

Answer 4

嘗試使用這個`

newHandleChange =val=> {
const value=localStorage.setItem('currentTime', val.format('h:mm a'))

    this.setState({
      value
    })
  }`

看看這個應用程序https://codesandbox.io/s/competent-bohr-6jon1