当我更改其中一个时，为啥所有日期选择器值都变为空？

Posted 2023-05-07

【中文标题】当我更改其中一个时，为啥所有日期选择器值都变为空？

【英文标题】：Why all datepicker values become null when I change one of this?当我更改其中一个时，为什么所有日期选择器值都变为空？

【发布时间】：2019-04-16 12:51:11

【问题描述】：

我从数据库中获取值并将其保存在状态 enteredEvent：

class FormEditPage extends Component 
  constructor(props) 
    super(props);
    this.state =       
      enteredEvent: 
        name: '',
        date: new Date(),
        time: '',
        place: '',        
        datepub: new Date()
      ,      
    ;
    ...
  

  componentDidMount()     
      this.onHandleEventOneFetch(idEvent);     
  

  handleChangeInputName(newValue) 
    this.setState( enteredEvent:  name: newValue  );
  

  handleChangeInputDate(newValue) 
    this.setState( enteredEvent:  date: newValue  );
  

  handleChangeInputTime(newValue) 
    this.setState( enteredEvent:  time: newValue  );
  

  handleChangeInputPlace(newValue) 
    this.setState( enteredEvent:  place: newValue  );
    

  handleChangeInputDatepub(newValue) 
    this.setState( enteredEvent:  datepub: newValue  );
  

  onHandleEventOneFetch(id) 
    fetch(..., 
      method: 'GET'
    )
        ...
        .then(data =>
            this.setState(
              enteredEvent: 
                name: data[0].name,
                date: new Date(data[0].date),
                time: data[0].time,
                place: data[0].place,                
                datepub: new Date(data[0].datepub)
              
            )
        );
    

  render() 
    return (
      <div>        
              <FormEvent
                enteredEvent=this.state.enteredEvent
                onHandleChangeInputName=this.handleChangeInputName
                onHandleChangeInputDate=this.handleChangeInputDate
                onHandleChangeInputTime=this.handleChangeInputTime
                onHandleChangeInputPlace=this.handleChangeInputPlace
                onHandleChangeInputDatepub=this.handleChangeInputDatepub
              />          
      </div>
    );
  

在这个组件中，我添加了 datapicker 和 timepicker：

import DatePicker from 'react-date-picker';
import TimePicker from 'react-time-picker';

class FormEvent extends Component 
  constructor(props) 
    super(props);    
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleDateChange = this.handleDateChange.bind(this);
    this.handleTimeChange = this.handleTimeChange.bind(this);
    this.handlePlaceChange = this.handlePlaceChange.bind(this);
    this.handleDatepubChange = this.handleDatepubChange.bind(this);   
  

  handleNameChange(event) 
    this.props.onHandleChangeInputName(event.target.value);
  

  handleDateChange(newDate) 
    this.props.onHandleChangeInputDate(newDate);
  

  handleTimeChange(newTime) 
    this.props.onHandleChangeInputTime(newTime);
  

  handlePlaceChange(event) 
    this.props.onHandleChangeInputPlace(event.target.value);
  

  handleDatepubChange(newDatepub) 
    this.props.onHandleChangeInputDatepub(newDatepub);
  

  render() 
    return (
      <div>        
       <input type='text' required value=this.props.enteredEvent.name onChange=this.handleNameChange/>            
       <DatePicker onChange=this.handleDateChange value=this.props.enteredEvent.date/>            
       <TimePicker onChange=this.handleTimeChange value=this.props.enteredEvent.time
       <input type='text' value=this.props.enteredEvent.place onChange=this.handlePlaceChange/>
       <DatePicker onChange=this.handleDatepubChange value=this.props.enteredEvent.datepub/>
      </div>
    );
  

 FormEvent.propTypes =   
   enteredEvent: PropTypes.object,
   onHandleChangeInputName: PropTypes.func,
   onHandleChangeInputDate: PropTypes.func,
   onHandleChangeInputTime: PropTypes.func,
   onHandleChangeInputPlace: PropTypes.func,  
   onHandleChangeInputDatepub: PropTypes.func
;

结果，所有日期选择器和时间选择器都从输入事件中获取值。当我更改 datepicker/timepicker 之一中的值时，其他 datepicker 和 timepicker 中的值变为 null。我该如何解决？

【参考方案1】：

您已将状态设置为嵌套对象，当您设置状态时，您将覆盖整个对象。您要么需要将对象与之前的状态合并，要么停止使用嵌套对象。 React 会进行状态的浅合并，但不会进行深度合并。

如果您可以使用对象扩展语法，您自己进行合并将如下所示：

this.setState(oldState => ( 
  enteredEvent:  
    ...oldState.enteredEvent,
    name: newValue 
  
);

如果您无法使用对象扩展语法，则可以这样做：

this.setState(oldState => ( 
  enteredEvent: Object.assign(, oldState.enteredEvent, name: newValue)
);

如果你想采用扁平化状态的方法，它看起来像这样：

this.state =       
  name: '',
  date: new Date(),
  time: '',
  place: '',        
  datepub: new Date()
;

// ...

this.setState( name: newValue );

【参考方案2】：

当您有一个处于状态的嵌套对象时，您必须确保创建当前处于状态的对象的副本，否则它将被仅具有给定属性的新对象覆盖。

示例

handleChangeInputName(newValue) 
  this.setState(previousState => (
    enteredEvent:  ...previousState.enteredEvent, name: newValue 
  ));