我想在從資料庫中獲取類別后更新類別陣列的值/插入類別 json 資料。但找不到正確的方法？注意：請檢查 loadCategories 函式。
import React, {useEffect, useState} from "react";
import {getCategories} from "../../../Functions/Categoy";
const initialState = {
title:"",
desc:"",
colors:["Black", "Brown", "Silver", "White", "Blue"],
categories:[] // here to insert
}
const CreateProducts = () => {
const [data, setData] = useState([initialState]);
const { title, desc, colors, categories } = data
useEffect(() => {
loadCategories();
}, [])
const loadCategories = () => {
getCategories()
.then((res) => {
// here I want to insert/update categories value
// setData({ prevState => [...prevState, categories : res.data] })
})
};
return (
<div>{JSON.stringify(categories)}</div>
)}
export default CreateProducts;
uj5u.com熱心網友回復：
試試這個
import React, {useEffect, useState} from "react";
import {getCategories} from "../../../Functions/Categoy";
const initialState = []
const CreateProducts = () => {
const [data, setData] = useState(initialState);
useEffect(() => {
loadCategories();
}, [])
const loadCategories = () => {
getCategories()
.then((res) => {
setData([...data,...res.data])
})
};
return (
<div>{JSON.stringify(data)}</div>
)}
export default CreateProducts;
uj5u.com熱心網友回復：
“類別”可能是一個錯字？它應該是“類別”。
無需將
initialState陣列添加到useState.async/await在處理fetch. 您可以添加一個異步函式useEffect并讓它獲取您的資料，決議它，然后更新您的組件狀態。然后你可以
map通過 state 中的類別（或任何你想做的事情）來生成你的 JSX。
一個更新的例子。
import React, {useEffect, useState} from 'react';
import {getCategories} from '../../../Functions/Category';
const initialState = {
title: '',
desc: '',
colors: ['Black', 'Brown', 'Silver', 'White', 'Blue'],
categories: []
};
function CreateProducts() {
const [data, setData] = useState(initialState);
useEffect(() => {
async function loadCategories() {
const res = await getCategories();
const categories = await res.json();
setCategories({ ...data, categories });
}
loadCategories();
}, [])
return (
<div>
{data.categories.map(category => <div>{category}</div>)}
</div>
);
}
export default CreateProducts;
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/354127.html
標籤：javascript 节点.js 反应 反应钩子 使用状态
上一篇：我正在嘗試在此處添加影像，但在我使用this.props.imageUri的那一刻。我得到一個空白影像..找不到解決方案