Простейший способ создания уникального идентификатора для значения, извлеченного из формы (React)

Question

Я пытаюсь получить значение из ввода, присвоить ему уникальный идентификатор, затем передать имя и идентификатор функции addFolder (). Затем объект будет помещен в конец массива папок состояния. Моя главная проблема - попытка создать уникальный идентификатор

    state = {
        name: '',
        id: ''
    }

    static contextType = Context;

    handleChange = (e) => {
        this.setState({name: e.target.value, id: ?? })  <-----------
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.context.addFolder(this.state.name, this.state.id)
    }

    render() {
        return (
            <div>
            <form 
            className='AddFolderForm'
            onSubmit={this.handleSubmit}
            >
                <h2>Add Folder</h2>
                <label >Name: </label>
                <input 
                type="text"
                id=??            <------------------
                placeholder="Folder Name"
                value={this.state.name}
                onChange={this.handleChange}
                />
                <button
                    type="submit"
                >Submit

                </button>
            </form>
            </div>
        )
    }
}


export default AddFolder

class App extends Component {
    state = {
        notes: [],
        folders: [],
    };

.... other code...

addFolder = (name, id) => {
        this.setState(prevState => ({
            folders: [...prevState.folders, {
                "name": `${name}`,
                "id": `${id}`,
            }]
          }))
    }

Answer 1

В ванили есть простой способ js. Если вы используете этот метод, вам не нужно добавлять никаких зависимостей, которые улучшают производительность вашего проекта.

let uniqueId = (function () {
    let num = 0;
    return function (prefix) {
        prefix = String(prefix) || '';
        num += 1;
        return prefix + num;
    }
}
    ());
let id = uniqueId('id_');
console.log(id); // 'id_1'

В loda sh есть еще один метод. добавьте loda sh с помощью следующей команды

npm i --save lodash

, затем используйте, как показано в примере ниже

let _ = require('lodash');

let id = _.uniqueId('id_');

console.log(id); // 'id_1'

let i = 10, ids = [];
while (i--) {
    ids.push(_.uniqueId('id_'));
}

console.log(ids[0]); // id_2
console.log(ids[9]); // id_11

Если вам нужен идентификатор в другом формате, выполните следующие действия. Это также продвинутое решение Vanilla js.

let uniqueId = (function () {
    let c = 0,
    st = new Date();
    return function (prefix) {
        var t = new Date() - st,
        r = Math.floor(Math.random() * 1000),
        str;
        prefix = String(prefix) || '';
        str = '-' + c + '-' + t + '-' + r;
        c += 1;
        return prefix + str;
    }
}
    ());

console.log(uniqueId('id'));
console.log(uniqueId('id'));
console.log(uniqueId('id'));
setTimeout(function () {
    console.log(uniqueId('id'));
}, 1000);
/*
id-0-1-145
id-1-8-113
id-2-9-598
id-3-1018-910
*/

Answer 2

Вы должны проверить эту библиотеку uuid для реакции на генерацию уникального идентификатора. У вас есть 5 версий для его генерации.

npm install uuid --save

import { v1 as uuidv1 } from 'uuid';

//This is your unique id
const id = uuidv1();