如何重命名对象键并将对象值从字符串更改为数字

Question

Alright, guys.

I am dealing with <TimePicker/> third party library from React and want to manipulate the state so I can push this new format of code into a new object later.

when I target a value using this library, whatever time I pick, my state turns out to be a string like this - eg if I pick 20:30, this.state.time equals "20:30" .

I want to manipulate this string into an object like this:

from "20:30" to time: {hour: 20, minutes: 30} ///both hour and minutes are now numbers

My full code below:

import React from "react";
import TimePicker from "react-time-picker";
import './Clock.css'

class Clock extends React.Component {

    state = {
        time: '0:00',
        pushTime: [],
        value: ''
    };

    onChangeTimePickerHandler = time => {
        this.setState({time});
        let currentTime = this.state.time;
        this.props.CallbackRenderTime(currentTime)
    };

    //I am using TimePicker library for React and want to manipulate the income from the chosen time
    pushNewTimeHandler = () => {
        let time = [...this.state.time] ;// ["1", "0", ":", "0", "0"]
        time.splice(2, 1);
        let timeToOneString = time.join().replace(/,/g, "");
         let prepareStringForNewObject = (value, index) => {
             let array = value.substring(0,index) + ',' + value.substring(index);
             return array.split(',')
         };
        let newObj = {...prepareStringForNewObject(timeToOneString,2)};
        console.log(newObj); // {0: "10", 1: "00"}
    };

    render() {

        return (
            <div>
                <TimePicker
                    onChange={this.onChangeTimePickerHandler}
                    value={this.state.time}/>
                    <button onClick={this.pushNewTimeHandler}>Push the Array of Time</button>
                    <p>{this.state.time}</p>
            </div>


        )
    }
}

export default Clock

So I have been playing around and came with this really ugly part-of-the-issue solution:

 //I am using TimePicker library for React and want to manipulate the income from the chosen time
    manipulateTimeHandler = () => {
        //this.state.time is "10:00"
        let time = [...this.state.time] ;// now it looks like this: ["1", "0", ":", "0", "0"]
        time.splice(2, 1);
        let timeToOneString = time.join().replace(/,/g, "");
         let prepareStringForNewObject = (value, index) => {
             let array = value.substring(0,index) + ',' + value.substring(index);
             return array.split(',')
         };
        let newObj = {...prepareStringForNewObject(timeToOneString,2)};
        console.log(newObj); //finally it became the object, but the object values are still 
                            //strings and the object keys still need to be changed into "hour" 
                           //and "minutes" {0: "10", 1: "00"}
    };

So on my ugly solution pushNewTimeHandler I still need to rename the object keys to hour and minutes and also need to transform the string values for hours and minutes into numbers.

Answer 1

I'd split the time string by : , creating an array of strings, then map each string to a number, and destructure into hour and minutes on the left of the = . Then you can make an object of hour and minutes :

 const str = '20:30'; const [hour, minutes] = str.split(':').map(Number); const obj = { hour, minutes }; console.log(obj);