Question

我添加了带有日期选择器的项目，并且可以使用，但是当我尝试使用日期选择器编辑/更新那些项目时，则无法使用！给我很多错误，例如：

道具类型失败：提供给selected的类型string的道具DatePicker无效，预期object
一个组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换为受控制（反之亦然）。确定在组件的使用寿命期间使用受控或不受控制的输入元素。
道具类型失败：提供给selected的类型string的道具Calendar/Month/Week/Day无效，预期object。
未捕获的TypeError：无法读取未定义的属性“值”

并且输入为空，不显示今天的日期，如此处所示：

这是我的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;

非常感谢您的帮助！

Answer 1

从获取中获取的日期需要转换为 Moment 日期。我不知道您的日期将以什么格式返回，但是如果它不是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事件处理程序返回所选日期（它不像 normal JS事件处理程序那样）。因此，您将不会收到具有event.target.value的对象。相反，您将收到选定的日期，因此只需在状态对象中将参数的值设置为startDate即可：

 onChange={(newDate) => this.setState({ startDate: newDate })}

请注意，该值已经是即时日期，因此不需要转换。

然后，您将需要对endDate和endDate日期选择器进行同样的操作。

还请注意，除非您需要更改输入元素中实际显示的内容，否则不必真正设置value属性-通常您可以仅使用selected和dateFormat属性来实现正确的输出（当然也可以同时设置两个值并选择相同的内容会导致错误，因为前者需要一个字符串，而后者则是一个矩对象。

关于受控到未受控的错误可能是由于您没有在构造函数中完全初始化状态而引起的-您应该将所有组件prop初始化为构造函数中明智的方法，因为对获取的响应几乎肯定会在初始构造之后发生呈现为基于其承诺。构造函数中的初始状态应如下所示（顺便说一下，project属性似乎是不必要的）：

this.state = {
        projectname: '',
        typeofproject: 'Film (Cinema)', //if you want a default selected otherwise leave as empty string
        imageURL: '',
        startDate: moment(),
        endDate: moment()
    }

Answer 2

startDate是否设置为字符串？我假定它应该是一个Date对象，如错误所示。

另一个问题似乎是渲染时，fetch和setState（在componentDidMount中）未完成。

尝试添加状态变量（例如isLoading），并将其初始化为true，并在完成所有componentDidMount行后将其设置为false。现在在渲染器中检查它，并在isLoading为false时显示一条“正在加载”消息。

您还需要注意获取失败的情况。在这种情况下，您根本无法渲染datePicker。顺便说一句，我不确定获取是否足够。在某些错误处理情况下，它存在问题。我总是使用axios。

用Reactjs DatePicker更新状态不起作用

2 个答案: