使用效果和异步()
useEffect and async()
在 useEffect()
挂钩中,我主要是尝试通过递增 lastIndex
向映射到 tempData
的每个 'item'
对象添加一个 'id'
每次迭代中的状态。但是,所有映射的 item.id
都返回了 0(初始状态值)。
我猜在迭代中调用 setLastIndext
函数有什么问题?谢谢。
const SearchAppointments = React.memo(() => {
const [data, setData] = useState([ ])
const [lastIndex, setLastIndex] = useState(0)
useEffect( () => {
const fetchData = async() => {
var response = await fetch('../data.json');
var result = await response.json()
var tempData = result.map( item => {
item.id = lastIndex;
setLastIndex(lastIndex => lastIndex + 1);
return item
})
setData(tempData)
};
fetchData();
}, [])
return (
<div>
</div>
);
})
setLastIndex
是异步函数 lastIndex
的值只会在下一次渲染时更新,但 result.map
是同步函数 ==> lastIndex 在 result.map
中始终为 0
你可以试试这个:
const SearchAppointments = React.memo(() => {
const [data, setData] = useState([ ])
// You not really need this lastIndex state for setting id for your data item, but somehow you want it after setData you can keep this and set to the last index of the item in fetched data
const [lastIndex, setLastIndex] = useState(0)
useEffect( () => {
const fetchData = async() => {
var response = await fetch('../data.json');
var result = await response.json()
var tempData = result.map( (item, index) => ({...item, id: index}))
setLastIndex(tempData.length -1)
setData(tempData)
};
fetchData();
}, [])
return (
<div>
</div>
);
})
你会试试这个:
const SearchAppointments = React.memo(() => {
const [data, setData] = useState([]);
const fetchData = async() => {
const response = await fetch('../data.json');
const result = await response.json();
setData(result.map( (item, index) => ({...item, id:index})))
};
useEffect( () => {
fetchData();
}, [])
return (
<div>
</div>
);
})```
你真的需要lastIndex
吗?
有data.length
。
可以在setData(lastData=>...)
里面使用
在 useEffect()
挂钩中,我主要是尝试通过递增 lastIndex
向映射到 tempData
的每个 'item'
对象添加一个 'id'
每次迭代中的状态。但是,所有映射的 item.id
都返回了 0(初始状态值)。
我猜在迭代中调用 setLastIndext
函数有什么问题?谢谢。
const SearchAppointments = React.memo(() => {
const [data, setData] = useState([ ])
const [lastIndex, setLastIndex] = useState(0)
useEffect( () => {
const fetchData = async() => {
var response = await fetch('../data.json');
var result = await response.json()
var tempData = result.map( item => {
item.id = lastIndex;
setLastIndex(lastIndex => lastIndex + 1);
return item
})
setData(tempData)
};
fetchData();
}, [])
return (
<div>
</div>
);
})
setLastIndex
是异步函数 lastIndex
的值只会在下一次渲染时更新,但 result.map
是同步函数 ==> lastIndex 在 result.map
中始终为 0
你可以试试这个:
const SearchAppointments = React.memo(() => {
const [data, setData] = useState([ ])
// You not really need this lastIndex state for setting id for your data item, but somehow you want it after setData you can keep this and set to the last index of the item in fetched data
const [lastIndex, setLastIndex] = useState(0)
useEffect( () => {
const fetchData = async() => {
var response = await fetch('../data.json');
var result = await response.json()
var tempData = result.map( (item, index) => ({...item, id: index}))
setLastIndex(tempData.length -1)
setData(tempData)
};
fetchData();
}, [])
return (
<div>
</div>
);
})
你会试试这个:
const SearchAppointments = React.memo(() => {
const [data, setData] = useState([]);
const fetchData = async() => {
const response = await fetch('../data.json');
const result = await response.json();
setData(result.map( (item, index) => ({...item, id:index})))
};
useEffect( () => {
fetchData();
}, [])
return (
<div>
</div>
);
})```
你真的需要lastIndex
吗?
有data.length
。
可以在setData(lastData=>...)