Question

我的API返回带有LocalDate字符串的对象数组，当我在前端将其获取时，我想将其从状态转换为带时区的JS Date对象。

获取API数据后，我试图在componentDidMount（）函数中执行此操作，但是在设置状态后，反应开发人员工具向我显示了dateList状态未得到验证。

DateComponent

class DateComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            dateList: [],
            id: this.props.id,

        }

    }

    componentDidMount() {
       DateService.retrieveProfile(this.state.id)
            .then(response => {
                this.setState({
                    dateList:this.convertDatesToTimezoneUTC(response.data.dateList)
                })
            })
    }

    convertDatesToTimezoneUTC(dateList) {
       dateList.map((value) => (
                value.date = new Date(value.date),
            )
        );
    }


    render() {
        let {dateList, id} = this.state;

          return (
            <div>
              <Formik
               enableReinitialize
               initialValues={{dateList}}>
                <FieldArray name="dateList"
                     render={() => (
                        <div>
                             {dateList.map((value, index) => (
                              <div className={"m-3 form-row"} id={value.id} key={index}>
                               <Field className="form-control col-md-2 mr-2" type="text"
                                                           name={`dateList[${index}].date`} readOnly/>

                    </Formik>)
                }
            </div>
        )
    }
}

export default DateComponent;

型号

dateList[{
id:"some id"
date:"2019-08-16"
}]

没有convert convertDatesToTimezoneUTC（）函数，一切正常，并正确返回数据。我错过了什么吗？

Answer 1

我想您忘记了return的{{1}}：

convertDatesToTimezoneUTC()

Answer 2

您需要通过return函数array新计算的convertDatesToTimezoneUTC，也只需更改date并保持其余对象属性不变，

convertDatesToTimezoneUTC = (dateList) => {
   return dateList.map((value) => ({
            ...value,
            date : new Date(value.date),
          })
        )
}

如何在ReactJS前端正确转换日期

2 个答案: