我正在通過這樣的陣列進行映射
const isFocused = useIsFocused();
async function getProfile() {
const [labels, setLabels] = useState([])
...
array.map(x => {
handleChange(x.date)
})
...
}
useEffect(() => {
isFocused && getProfile()
}, [isFocused]);
handleChange() 的代碼
function handleChange(date) {
console.log(date,"THIS IS DATE IN HANDLE")
setLabels([...labels, date])
}
在這之后的 label 的值只是陣列的最后一個索引。我該如何解決這個問題？
uj5u.com熱心網友回復：
你不能直接改變狀態。您需要制作狀態的副本，然后對副本進行變異。
uj5u.com熱心網友回復：
我建議您先使用一個臨時陣列來存盤收集到的結果，然后再設定狀態。
由于 React 中的 setState 是異步的，因此程式可能會獲得直到最后一個 setState 才更新（始終為空）的狀態。
const [labels, setLabels] = useState([])
let temp = [...labels]; //Get Any pre-stored items
array.map(x => {
console.log(date,"THIS IS DATE IN HANDLE")
temp.push(labels);
})
setLabels(temp);
uj5u.com熱心網友回復：
目前尚不清楚您要做什么，如果getProfile是一個組件（使其成為 Pascal 案例），您可能希望它在useEffect中作為
const [labels, setLabels] = useState([]);
useEffect(() => {
const changedLabels = array.map((x) => {
return handleChange(x.date);
});
function handleChange(date) {
// do w/e intended to be ...
return handledData;
}
setLabels([...labels, ...changedLabels]);
}, []);
uj5u.com熱心網友回復：
如果您有the available data或MOCKUP_DATA此資料來自Props of component，并且您setState第一次需要。你可以這樣做：
const MOCKUP_DATA = [{date: '123'}, {date: '456'}]
export default function App() {
const [labels, setLabels] = useState(() => {
let values = [];
for(let item of MOCKUP_DATA) {
values.push(item.date)
}
return values
})
return (
<ul className="App">
{labels.map((item, index) => <li key={index}>{item}</li>)}
</ul>
);
}
但如果value not avaiable就像get value after call api. 你可以這樣做：
const [labels, setLabels] = useState([]);
useEffect(() => {
// ... Call API
let newValues = [];
for (let item of response?.array) {
newValues.push(item.date);
}
setLabels([...labels, ...newValues]);
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/528294.html
上一篇：react-native-獲取html字串中所有<b>標記內的文本
下一篇：使用傳統的后端分頁實作無限查詢