我使用日期选择器添加项目并且它可以工作，但是当我尝试使用日期选择器编辑/更新这些项目时，它不起作用!给我很多错误，例如:
失败的 prop 类型:提供给
DatePicker的string类型的selected无效，预期为object组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换到受控制(反之亦然)。在组件的生命周期内决定使用受控或非受控输入元件。
失败的 Prop 类型:提供给
日历/月/周/日的字符串类型的 Propselected无效，预期对象。未捕获类型错误:无法读取未定义的属性“值”
并且输入为空，没有像预期那样显示今天的日期，示例如下:
这是我的 EditProject 组件:
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import './EditProject.css';
import 'react-datepicker/dist/react-datepicker.css';
class EditProject extends Component {
constructor(props) {
super(props);
this.state = {
project: {}
}
}
componentDidMount() {
// console.log('PROPS ' + JSON.stringify(this.props));
const { match: { params } } = this.props;
fetch(`/dashboard/project/${params.id}/edit`)
.then(response => {
return response.json()
}).then(project => {
this.setState({
projectname: project.projectname,
typeofproject: project.typeofproject,
imageURL: project.imageURL,
startDate: project.startDate,
endDate: project.endDate
})
})
}
render() {
const { match: { params } } = this.props;
return (
<div className='EditProject'>
<h1 className='EditProject__title'>Edit</h1><h1 className='EditProject__projectname'>{this.state.projectname}</h1>
<hr />
<form method='POST' action={`/dashboard/project/${params.id}/edit?_method=PUT`}>
<div className='form-group container'>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" style={{border:'none'}} id="basic-addon1">Project Name</span>
</div>
<input type='text' className='form-control input' placeholder='insert new project name' value={this.state.projectname} name='projectname' ref='projectname' onChange={(event) => this.setState({ projectname: event.target.value })} />
</div>
</div>
<div className='form-group container'>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" style={{border:'none'}} id="basic-addon1">Type of Production</span>
</div>
<select className='form-control input' value={this.state.typeofproject} name='typeofproject' ref='typeofproject' onChange={(event) => this.setState({ typeofproject: event.target.value })}>
<option value='Film (Cinema)'>Film (Cinema)</option>
<option value='Film (TV)'>Film (TV)</option>
<option value='Film (series)'>Film (series)</option>
<option value='Short film'>Short film</option>
<option value='TV mini-series'>TV mini-series</option>
<option value='TV series'>TV series</option>
<option value='TV program'>TV program</option>
<option value='TV reporting'>TV reporting</option>
<option value='Vox Pop'>Vox Pop</option>
<option value='Advertisement Ad'>Advertisement Ad</option>
<option value='Documentary'>Documentary</option>
<option value='Documentary (TV)'>Documentary (TV)</option>
<option value='Documentary (series)'>Documentary (series)</option>
<option value='Commercial'>Commercial</option>
<option value='Video Clip'>Video Clip</option>
<option value='Live Video Clip TV'>Live Video Clip TV</option>
<option value='Photography Session'>Photography Session</option>
</select>
</div>
</div>
<div className='form-group container'>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" style={{border:'none'}} id="basic-addon1">Start Date</span>
</div>
// ================DATEPICKER HERE================
<DatePicker
todayButton={"Today"}
dateFormat="DD/MM/YYYY"
selected={this.state.startDate}
value={this.state.startDate}
onChange={(event) => this.setState({ startDate: event.target.value })}
/>
</div>
</div>
<div className='form-group container'>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" style={{border:'none'}} id="basic-addon1">End Date</span>
</div>
<DatePicker
todayButton={"Today"}
dateFormat="DD/MM/YYYY"
selected={this.state.endDate}
value={this.state.endDate}
onChange={(event) => this.setState({ endDate: event.target.value })}
/>
</div>
</div>
// / ================DATEPICKER HERE================
<div className='form-group container'>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" style={{border:'none'}} id="basic-addon1">Project Image URL</span>
</div>
<input type='text' className='form-control input 'placeholder='insert new project image URL' value={this.state.imageURL} name='imageURL' ref='imageURL' onChange={(event) => this.setState({ imageURL: event.target.value })} />
</div>
</div>
<div className='form-group container'>
<button type='submit' className='btn btn-default button--update'>Update</button>
<NavLink to={`/project/${params.id}/`} ><button type='submit' style={{ backgroundColor: '#b5b5b5' }} className='btn btn-default button--update'>Cancel</button></NavLink>
</div>
</form>
</div>
);
}
}
export default EditProject;
非常感谢您的帮助!
最佳答案
来自您提取的日期需要转换为时刻日期。我不知道您的日期返回的格式是什么，但如果它不是 ISO 8601 格式 (YYYY-MM-DD)，那么您还需要在创建 Moment 对象时指定格式，因此将代码更改为以下之一以下内容:
startDate: moment(project.startDate)
startDate: moment(project.startDate, 'DD-MM-YYYY') //specify format that is relevant for your date string if it is not ISO8601
组件提供的 onChange 事件处理程序返回选定的日期(它与正常 JS 事件处理程序不同)。因此，您将不会收到具有 event.target.value 的对象。相反，您将收到选定的日期，因此只需将参数的值设置为状态对象中的 startDate 即可:
onChange={(newDate) => this.setState({ startDate: newDate })}
请注意，该值已经是一个时刻日期，因此不需要转换。
然后，您需要对 endDate 和 endDate 日期选择器执行同样的操作。
另请注意，除非您需要更改输入元素中实际显示的内容，否则实际上没有必要设置 value 属性 - 通常您只需使用 selected 和 dateFormat 属性即可实现正确的输出(当然还可以设置两个值)并选择相同的东西将导致错误，因为前者需要字符串，后者需要时刻对象)。
有关受控到不受控的错误可能是由于您没有在构造函数中完全初始化状态而引起的 - 您应该将所有组件 Prop 初始化为构造函数中合理的内容，因为对获取的响应几乎肯定会在初始初始化之后发生渲染为其 promise 的基础。构造函数中的初始状态应如下所示(顺便说一下，项目属性似乎不必要):
this.state = {
projectname: '',
typeofproject: 'Film (Cinema)', //if you want a default selected otherwise leave as empty string
imageURL: '',
startDate: moment(),
endDate: moment()
}
关于javascript - 使用 Reactjs DatePicker 更新状态不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52896975/