将useState内部的字符串信息转换为parseFloat时返回0

Question

import * as C from './styles';

import AddButton from '../../components/AddButton';
import { useEffect, useState } from 'react';
import { useApi } from '../../hooks/useApi';

const AddProduct = () => {
const api = useApi();
const [apiCategories, setApiCategories] = useState<any[]>([]);
const [isCreate, setIsCreate] = useState<boolean>(false);
const [name, setName] = useState<string>('');
const [price, setPrice] = useState<number>(0);
const [desc, setDesc] = useState<string>('');
const [stock, setStock] = useState<number>(0);
const [categories, setCategories] = useState<string>('');
const [priceSTR, setPriceSTR] = useState<string>('');
const [stockSTR, setStockSTR] = useState<string>('');
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<boolean>(false);
useEffect(() => {
const category = async () => {
const categories = await api.getCategories();
setApiCategories(categories);
}
category();
}, []);  

const onSubmit = async () => {
try {
setLoading(true);
const priceFLT = parseFloat(priceSTR);
const stockINT = parseInt(stockSTR);
setPrice(priceFLT);
setStock(stockINT);
setLoading(false);
await api.postProduct(name, price, desc, stock, categories);
setIsCreate(true);
setError(false);
setName('');
setDesc('');
setPriceSTR('');
setStockSTR('');    
} catch (err) {
setError(true);
console.log(err);
}
}
return (
<C.Container>
<C.Post>
<C.Input 
placeholder='Product name'
value={name}
onChange={e => setName(e.target.value)}
/>
</C.Post> 
<C.Post>
<C.Desc 
placeholder='Simple desc...'
value={desc}
onChange={e => setDesc(e.target.value)}
/>
</C.Post>
<C.Post>
<C.Input 
placeholder='Price'
value={priceSTR}
onChange={e => setPriceSTR(e.target.value)}
/>
</C.Post>
<C.Post>
<C.Input 
placeholder='Stock'
value={stockSTR}
onChange={e => setStockSTR(e.target.value)}
/>
</C.Post>
<C.Post>
<C.Categories 
onChange={(e) => setCategories(e.target.value)}
>
<option value="Todas categorias">Choose a category</option>
{apiCategories.map(category => {
return (
<option value={`${category.name}`}>{category.name}</option>
)
})}
</C.Categories>
</C.Post>
<C.Add>
<AddButton 
children='Send'
type='submit'
onClick={onSubmit}
/>
</C.Add>
{isCreate ? (
<p id='check'>Product Created!</p>
) : null} 
{error ? (
<p id='error'>Error!</p>
) : null} 
</C.Container>
)
}
export default AddProduct

我的真正目的是从这些输入中获得信息；useApi"；钩子来验证新产品的注册。然而；价格；以及"；股票；API中的状态必须分别以float和int的形式发送，但我希望获得字符串中的信息，然后转换为float和整型，然后将其发送到API。这就是我试图用做的

const priceFLT = parseFloat(priceSTR);
const stockINT = parseInt(stockSTR);
setPrice(priceFLT);
setStock(stockINT);

我可以发货，但库存和价格总是以"；0〃；。我该如何解决这个问题？

ps：我想在输入中获得字符串中的这些信息，以便能够使用占位符并能够使用"制定价格。

Answer 1

您实际上不需要更新价格或股票的状态就可以将其提供给您的api调用

...
const priceFLT = parseFloat(priceSTR);
const stockINT = parseInt(stockSTR);
setLoading(false);
await api.postProduct(name, priceFLT, desc, stockINT, categories);
...

setPrice或setStock是异步的，因此更新不是立即的，这就是为什么当您尝试立即使用price或stock变量时，最终会得到0(默认值(的部分原因(另一个更复杂的原因是由于useState和reference的工作方式，一旦更新了onSubmit中已调用的price变量，就与已更新的price变量不同(