如何从获取的 json 数据中仅返回设置状态?

Question

im 使用此 API 获取 json 数据。

const FetchEarthquakeData = url => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(jsonData => setData(jsonData.features))
}, [url]);
return data;
};

问题是当我像这样使用这个函数时：

const jsonData = FetchEarthquakeData(url)
console.log(jsonData);

我得到以下控制台日志：

null
Array(17)

所以我的函数 FetchEarthquakeData 返回空变量和！所需的 api。但是，如果我想在 jsonData 上映射((，则映射空值。如何重构我的代码，以便我只得到数组？

Answer 1

我不太确定useState()和setData()做什么。但是为了从 API 获取 json 数据，您可以按如下方式创建函数，然后您可以对获取的数据执行操作。

const url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson"
const FetchEarthquakeData = url => {
return new Promise(resolve => {
fetch(url)
.then(res => res.json())
.then(jsonData => resolve(jsonData.features))
})
}
FetchEarthquakeData(url).then(features => {
console.log(features)
// Do your map() here
})

Answer 2

根据 react hooks 的文档，只有从 React 函数调用钩子才不要从常规 JavaScript 函数调用 Hooks。 React Function Components -- 基本上只是 JavaScript 函数，即返回 JSX(React 的语法(的 React 组件。 根据您的要求，您可以在 React 组件中执行以下操作。 想法是用空数组初始化状态钩子，然后在 JSON 数据可用时更新它。获取逻辑可以在使用效果内移动。

const SampleComponent=()=>{
const [data,setData] = useState([])
useeffect (){
fetch(url).then((responsedata)=>setData(responseData) ,err=>console.log (err)
}
return (
<>
{
data.map((value,index)=>
<div key=index>{value}<div>
}
</>
)
}

如果您发现上面的获取模式在您的应用程序中重复，则可以使用相同的自定义钩子。

const useFetch = (url, options) => {
const [response, setResponse] = React.useState(null);
const [error, setError] = React.useState(null);
React.useEffect(() => {
const fetchData = async () => {
try {
const res = await fetch(url, options);
const json = await res.json();
setResponse(json);
} catch (error) {
setError(error);
}
};
fetchData();
}, []);
return { response, error };
};

在你的 React 组件中，你可以像这样使用

const {data,error} = useFetch(url , options)

Answer 3

你必须以异步的方式做到这一点，以实现你需要的东西。 我建议你单独做。如果您需要在组件挂载时加载数据。

另一件事是你的函数有点混乱。 让我们假设一些事情：

const Example = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const result = await fetch(url);
setData(result.features);
};
fetchData();
}, []);
return (
<div>
{console.log(data)}
{data && <p>{JSON.stringify(data, null, 2)}</p>}
</div>
);
};

我确信您这样做的方式是将数据正确存储在data，但您无法在控制台上看到它.log。这有点棘手。 你可以在这里阅读更多内容=> https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous-ce87ef1a9cf3

如果您想处理不同的状态(如加载和错误(，则增加了更多的复杂性。

const Example = () => {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const result = await fetch(url);
setData(result.features);
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, []);
return (
<div>
{console.log(data)}
{data && <p>{JSON.stringify(data, null, 2)}</p>}
</div>
);
};