在useEffect()中为变量赋值后引用JSON对象字段

Question

我正在尝试从API调用中检索JSON对象，然后将useState变量设置为响应以在我的应用程序中使用。我能够成功地接收JSON响应，但如果我试图引用特定的字段，我会得到一个错误：CCD_ 1。我知道发生这种情况是因为最初data变量只是空的，但我不确定防止这种情况的最佳方法，我怀疑我做错了什么。

以下是查询API并检索响应数据的函数：

export function searchFlightOffers(postData) {
return getAmadeusToken().then(data => {
const config = {
headers: {
'Authorization': `Bearer ${data.access_token}`
}
}
return axios.post("https://test.api.amadeus.com/v2/shopping/flight-offers", postData, config).then(data => data);
});

}

然后使用它的React Native函数

export default function FlightScreen() {
const [flightResponse, setFlightResponse] = useState(null);
useEffect(() => {
searchFlightOffers(postData).then(data => setFlightResponse(data.data));
}, [])
console.log("TEST: ", flightResponse.type);

有没有更有效的方法可以让我做到这一点？

编辑：希望能添加一个更清晰的问题描述，以下是我试图在中使用的JSX

return (
<ScrollView style={{marginTop: 220}}>
{
flightResponse != null ? flightResponse.map(data => {
return (
<FlightCard
key={data.id}
data={data}
onPress={() => {}}
/>
)
}) : false
}
</ScrollView>

如果我添加一个条件来检查flightResponse数据是否为null，然后映射数据(如果不是(，那么这就很好了。删除条件，只留下这样：

return (
<ScrollView style={{marginTop: 220}}>
{
flightResponse.map(data => {
return (
<FlightCard
key={data.id}
data={data}
onPress={() => {}}
/>
)
})
}
</ScrollView>

留下这个错误：null is not an object (evaluating 'flightResponse.map')。

虽然从技术上讲，有条件的是我的问题的解决方案，但必须有一种更干净的方法来处理这个问题？

更新：此问题的解决方案是更改

const [flightResponse, setFlightResponse] = useState(null);

至

const [flightResponse, setFlightResponse] = useState([]);

然后我可以从JSX中删除条件。

Answer 1

我很抱歉没有看到你放在那里的其他信息。显然，您已经通过添加null的检查自行解决了这个问题，据我所知，这是正确的使用模式。

您必须检查null，因为在react native执行代码以呈现组件之前，useEffect中的代码不能保证完成(因为它是异步的(。通过检查null，您可以保护这种确切的情况(以及其他情况，如获取数据时出错、数据本身为空等(

原始答案(已作废(

尝试用null is not an object (evaluating data.type)1样式重写searchFlightOffers函数。这样，返回的对象就更清楚了。我怀疑您当前的版本没有返回数据。

重写可以是这样的(未经测试，请谨慎使用(。

export const searchFlightOffers = async (postData) => {
try {
const token = await getAmadeusToken();
} catch (err) {
// handle error during token acquisition
console.log(err);
}

const config = {
headers: {
'Authorization': `Bearer ${token.access_token}`
}
}
try {
const flightOfferData = await axios.post(
"https://test.api.amadeus.com/v2/shopping/flight-offers",
postData,
config,
);
return flightOfferData;
} catch (err) {
// handle error during flight offer acquisition
console.log(err);
}
}