在从表单中获取的值上生成唯一 ID 的最简单方法（React）

Question

我试图从输入中获取值，为其分配一个唯一的 id，然后将名称和 id 传递给 addFolder() 函数。然后该对象将被推送到状态文件夹数组的末尾。我的主要问题是尝试创建一个唯一的 id

    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

您应该检查此库uuid以进行反应以生成唯一的 id。您有 5 个版本来生成它。

npm install uuid --save

import { v1 as uuidv1 } from 'uuid';

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