2 回答

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊
將這些行移至新的 useEffect 掛鉤。設(shè)置數(shù)據(jù)后會(huì)觸發(fā)
useEffect(() => {
const currentDatafile = data?.filter((item) => {
return item.assets[0].audio === value;
});
setCurrentData(currentDatafile)},[data])

TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊
您不應(yīng)該每次都從遠(yuǎn)程源重新獲取數(shù)據(jù)。我已將其包裝在自定義掛鉤中,在這里(以及自定義獲取器函數(shù)以使測(cè)試/模擬更容易)。
然后,您不應(yīng)該將選定的對(duì)象保持在狀態(tài)中,除非您需要在內(nèi)部修改它(在這種情況下,無(wú)論如何您都應(yīng)該將其復(fù)制到狀態(tài)原子中);相反,只需持有 ID 即可。
function fetchTourData() {
return fetch('https://52-90-82-235.maverickmaven.com/geotourdata/json.cfm?h=-107,37,s,en,3A771765')
.then(response => response.json())
.then(data => data.features.filter((elem) => elem.type === 'Feature'));
}
function useTourData() {
const [data, setData] = React.useState(null);
React.useEffect(() => {
fetchTourData().then(setData);
}, [setData]);
return data;
}
const Component = () => {
const tourData = useTourData();
const [selectedId, setSelectedId] = React.useState(null);
const selectedTour = (tourData || []).find(t => t.id === selectedId);
if (tourData === null) {
return <div>Loading</div>
}
return (
<div>
<div>
Selected: {JSON.stringify(selectedTour || "nothing")}
</div>
<ul>
{tourData.map(t => <li key={t.id}><a href="#" onClick={() => setSelectedId(t.id)}>{t.name}</a></li>)}
</ul>
</div>
);
};
ReactDOM.render(<Component />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
添加回答
舉報(bào)