如何将UUID转换为数字

Question

我正在为对象分配UUID。

首先我导入UUID包

import {v4 as uuidv4} from 'uuid'

然后，我将UUID分配给"newFeedback"对象。

import React, {useState} from 'react'
import {v4 as uuidv4} from 'uuid'
import Header from './components/Header'
import FeedbackForm from './components/FeedbackForm'
import FeedbackData from './data/FeedbackData'
import FeedbackStats from './components/FeedbackStats'
import FeedbackList from './components/FeedbackList'

function App() {
const [Data, setData] = useState(FeedbackData)
const handleDelete = (id) => {
if (window.confirm('Are you sure you want to delete?')) {
setData(Data.filter((item) => (item.id !== id)))
}
}
const handleAdd = (newFeedback) => {
newFeedback.id = uuidv4;
setData([newFeedback, ...Data]);
}
return (
<>
<Header/>
<div className='container'>
<FeedbackForm onAdd={handleAdd}/>
<FeedbackStats Data={Data}/>
<FeedbackList Data={Data} onDelete={handleDelete}/>
</div>
</>
)
}
export default App

import React, {useState} from 'react'
import '../index.css'
import Card from './shared/Card'
import Rating from './Rating'
import Button from './shared/Button'
function FeedbackForm({onAdd}) {
const [Text, setText] = useState('')
const [rating, setRating] =useState(0)
const [btnDisabled, setBtnDisabled] = useState(true)
const [errorMessage, setErrorMessage] = useState('')

const handleText = (e) => {
if (Text === '') {
setErrorMessage(null)
}
else if (Text !== '' && Text.trim().length <= 10) {
setErrorMessage('Review must be 10 characters or longer')
}
else {
setErrorMessage(null)
setBtnDisabled(false)
}
setText(e.target.value)
}
const handleSubmit = (e) => {
e.preventDefault();
if (Text.trim().length >=10) {
const newFeedback = {
Text: Text,
rating: rating,
}
onAdd(newFeedback);
setText('')
}
}

return (
<Card>
<form onSubmit={handleSubmit}>
<h2>How would you rate your service with us?</h2>
<Rating passRating={(rating) => (setRating(rating))}/>
<div className='input-group'>
<input 
placeholder='Write a review'
type='text'
value={Text}
onChange={handleText}
/>
<Button type='submit' isDisabled={btnDisabled}>Send</Button>
</div>
{errorMessage && <div className='message'>{errorMessage}</div>}
</form>
</Card>
)
}
export default FeedbackForm

import React from 'react'
import PropTypes from 'prop-types'
import FeedbackItem from './FeedbackItem'
function FeedbackList({Data, onDelete}) {
return (
<div className='feedback-list'>
{Data.map((item) => (
<FeedbackItem key={item.id} item={item} onDelete={onDelete}/>
))}
</div>
)
}
FeedbackList.propTypes = {
Data: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
rating: PropTypes.number.isRequired,
text: PropTypes.string.isRequired,
})
),
}
export default FeedbackList

然后我得到这个错误：

警告：失败的道具类型：为FeedbackList提供的类型为function的道具Data[0].id无效，应为number。

据我所知，这是由于UUID与标准PropTypes.number相比字节太大。

有什么解决办法吗？

Answer 1

根据我的理解，这是由于UUID的字节太大与标准PropTypes.number.相比

您的理解不正确。这是因为您实际上是在将uuidv4函数分配给id属性：

newFeedback.id = uuidv4;

也许你想做：

newFeedback.id = uuidv4();

该函数将返回一个字符串值。如果你真的想把它转换成一个数字，你可能需要一个Buffer，然后在某个地方进行转换，例如这里所描述的。