React中不使用UUID，在FormInput组件内生成唯一ID的方法

当然可以将唯一ID的生成逻辑移到FormInput组件内，这种做法能让组件职责更清晰，避免父组件承担不必要的处理工作。具体修改如下：

修改FormInput组件 #

在表单提交时，直接生成唯一ID并与用户输入数据合并，再传递给父组件：

import { useState } from 'react'
import Card from './Card'

const FormInput = props => {
    const [userInput, setUserInput] = useState({
        name: '',
        amount: '',
        date: ''
    })

    const nameInputHandler = e => {
        setUserInput( prevObj => ({...prevObj, name: e.target.value}))
    }

    const amountInputHandler = e => {
        setUserInput( prevObj => ({...prevObj, amount: e.target.value}))
    }

    const dateInputHandler = e => {
        setUserInput( prevObj => ({...prevObj, date: e.target.value}))
    }
    
    const submitHandler = e => {
        e.preventDefault()
        // 在这里生成唯一ID并合并数据
        const newItemWithId = {
            ...userInput,
            id: Math.random().toString()
            // 生产环境更推荐用uuid库或者Date.now() + Math.random()组合，降低重复概率
        }
        props.receiveNewItem(newItemWithId)
        // 重置所有表单输入
        setUserInput({ name: '', amount: '', date: '' })
    }

    return (
        <Card>
            <form onSubmit={submitHandler}>
                <input 
                    type="text" 
                    placeholder="Name Input" 
                    value={userInput.name} 
                    onChange={nameInputHandler} />

                <input 
                    type="number" 
                    placeholder="Amount Input" 
                    value={userInput.amount} 
                    onChange={amountInputHandler} />
                
                <input 
                    type="date" 
                    placeholder="Date Input" 
                    value={userInput.date} 
                    onChange={dateInputHandler} />

                <button>Add Item</button>
            </form>
        </Card>   
    )
}

export default FormInput;

简化MainUI组件 #

现在父组件只需直接传递收到的完整数据即可，无需再处理ID生成：

const MainUI = props => {
    const receiveNewItem = enteredNewItem => {
        // 直接传递已包含ID的项
        props.addNewItem(enteredNewItem)
    }

    console.log(props.data)
    return(
        <div>
            <FormInput receiveNewItem={receiveNewItem}/>
            {/* <MaxAmount data={props.data} /> */}
            <DisplayItems data={props.data} />
        </div>
    ) 
}

export default MainUI;

补充说明 #

• Math.random()生成的ID存在极小重复概率，生产环境更推荐使用专门的ID生成库（如uuid），或者用Date.now().toString() + Math.random().toString()的组合来降低重复风险。
• 原代码中<DisplayItems data={props.data} key={props.data.id} />存在问题：key应该加在DisplayItems内部渲染的单个列表项上，而不是DisplayItems组件本身，否则无法发挥React列表key的作用。

内容的提问来源于stack exchange，提问作者codeOrcode