如何用扩散算子改变反应状态

Question

我需要在获取数据时改变对象数组的状态。

这是我的使用状态

const [productData, setProductData] = useState<[{label: string, value: string}]>([{
label: '',
value: '',
}]);

这是我调用api的函数，它将改变我的状态，从对象数组中获取产品的名称，所以data.name。我正在尝试映射所有的名称，以便我可以在下拉菜单中显示。

const getAllProducts = async () => {
try {
const { data } = await axios.get(`http://localhost:8300/product/all`);
data.map((product: any) => setProductData());
} catch(error) {
console.log("Error", error);
}
};

我怎么能做到这一点在react typescript。使用映射值更改标签和值字段，以便可以在下拉菜单中显示。

Answer 1

你已经做了一个API调用，并在这里得到了响应。

const getAllProducts = async () => {
try {
const { data } = await axios.get(`http://localhost:8300/product/all`);
data.map((product: any) => setProductData()); <-- prepare your object here
} catch (error) {
console.log("Error", error);
}
};

得到响应后，准备下拉菜单所需的对象。如下所示

const dropdownValues = data.map((product: any) => ({ id: product.id, label: product.name, value: product.id }));
setProductData(dropdownValues);

在下拉标签中使用ProductData

Answer 2

type ProductData = {
label: string;
value: string;
};
const [productData, setProductData] = useState<ProductData[]>([
{
label: '',
value: '',
},
]);

const updateProductData = (newProductData: ProductData[]): void => {
setProductData((currentState) => {
const draft = newProductData;
// mutate your draft however you'd like...
return [...currentState, ...draft ];
});
return;
};

const getAllProducts = async (): ProductData[] => {
const newProductData = await // ...
updateProductData(newProductData);
return;
};

检查第二个音符useState文档

你可能会发现useReducer更有用。