在修改之前，我的組件是這樣的，而且還能用。
ForecastButtons.js
export const ForecastButtons = （{ city }）=> {
const [payload, setPayload] = useState(null)
const [error, setError] = useState(null)
const [loading, setLoading] = useState(true)
const fetchCityData = （） => {
const options = {
method: `POST`,
};
fetch(`/api/weather? city=${city}, options)
.then((response) => {
if(response.ok){
return response.json（）.then（setPayload）。
}
throw new Error('Api is not available'/span>)
})
.catch(error => {
console.error('Error fetching data: '/span>, error)
setError(error)
})
.finally(setLoading(false))
}
const location = payload?.location? .name;
const currentTemp = payload?.current?.temp_c;
return(
<div className="sm:col-span-2"/span>>
<p className="block text-sm font-medium text-gray-700"/span>> 選擇預測</p>。
< button onClick={fetchCityData} className="mt-1 bg-transparent hover。 bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded" type='button' >
今天
</button>今天
<p key={city? .location?.id} className='my-5'>
{ 地點？`${location}的當前天氣是${currentTemp}度` : '請搜索城市以查看當前天氣'}。
</p>/span>
</div>/span>
)
}
為了對fetchCityData函式進行單元測驗，我明白，我需要提取這個函式，然后以某種方式在我的ForecastButtons組件中使用。所以我嘗試了一下：
ForecastButtons組件
ForecastButtons.js 這就拋出了以下問題： 錯誤。
錯誤。無效的鉤子呼叫。鉤子只能在一個函陣列件的主體內呼叫。這可能是由于以下原因之一而發生的：
我剛剛學習 react，所以我被這個問題困住了。
uj5u.com熱心網友回復： 你不能在你的功能組件的主體之外使用鉤子或自定義鉤子export const FetchCityData=（） => {
const [payload, setPayload] = useState(null)
const [error, setError] = useState(null)
const [loading, setLoading] = useState(true)
const options = {
method: `POST`,
};
fetch(`/api/weather? city=${city}, options)
.then((response) => {
if(response.ok){
return response.json（）.then（setPayload）。
}
throw new Error('Api is not available'/span>)
})
.catch(error => {
console.error('Error fetching data: '/span>, error)
setError(error)
})
.finally(setLoading(false))
}
export const ForecastButtons = （{ city, payload, setPayload }） => {
const location = payload?.location? .name;
const currentTemp = payload?.current?.temp_c;
return(
<div className="sm:col-span-2"/span>>
<p className="block text-sm font-medium text-gray-700"/span>> 選擇預測</p>。
< button onClick={FetchCityData} className="mt-1 bg-transparent hover。 bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded" type='button' >
今天
</button>今天
<p key={city? .location?.id} className='my-5'>
{ 地點？`${location}的當前天氣是${currentTemp}度` : '請搜索城市以查看當前天氣'}。
</p>/span>
</div>/span>
)
}
export const FetchCityData=（setPayload, setError, setLoading) => {
const options = {
method: `POST`,
};
fetch(`/api/weather? city=${city}, options)
.then((response) => {
if(response.ok){
return response.json()。 then(data => setPayload（data）)
}
throw new Error('Api is not available'/span>)
})
.catch(error => {
console.error('Error fetching data: '/span>, error)
setError(error)
})
.finally(() => setLoading(false)
}
export const ForecastButtons = （{ city, payload, setPayload }） => {
const [payload, setPayload] = useState(null)
const [error, setError] = useState(null)
const [loading, setLoading] = useState(true)
const location = payload?.location? .name;
const currentTemp = payload?.current?.temp_c;
return(
<div className="sm:col-span-2"/span>>
<p className="block text-sm font-medium text-gray-700"/span>> 選擇預測</p>。
<button onClick={（） => FetchCityData（setPayload，setError，setLoading）} className="mt-1 bg-transparent hover: bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded" type='button' >
今天
</button>
<p key={city? .location?.id} className='my-5'>
{ 地點？`${location}的當前天氣是${currentTemp}度` : '請搜索城市以查看當前天氣'}。
</p>/span>
</div>/span>
)
}
你也可以在你的組件中宣告這個函式
export const ForecastButtons = （{ city, payload, setPayload }) => {
const [payload, setPayload] = useState(null)
const [error, setError] = useState(null)
const [loading, setLoading] = useState(true)
const location = payload?.location? .name;
const currentTemp = payload?.current?.temp_c;
const FetchCityData = (/span>) => {
const options = {
method: `POST`,
};
fetch(`/api/weather? city=${city}, options)
.then((response) => {
if(response.ok){
return response.json()。 then(data => setPayload（data）)
}
throw new Error('Api is not available'/span>)
})
.catch(error => {
console.error('Error fetching data: '/span>, error)
setError(error)
})
.finally(() => setLoading(false)
}
return(
<div className="sm:col-span-2"/span>>
<p className="block text-sm font-medium text-gray-700"/span>> 選擇預測</p>。
< button onClick={FetchCityData} className="mt-1 bg-transparent hover。 bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded" type='button' >
今天
</button>今天
<p key={city? .location?.id} className='my-5'>
{ 地點？`${location}的當前天氣是${currentTemp}度` : '請搜索城市以查看當前天氣'}。
</p>/span>
</div>/span>
)
}
不管你怎么做就是不要使用useState或任何其他功能組件之外的鉤子
看看https://reactjs.org/docs/hooks-rules.html
uj5u.com熱心網友回復：
在這個FetchCityData()中，你將回傳什么？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/334275.html
標籤：
上一篇：在React中根據時區改變時間
下一篇：如何洗掉重復2次以上的換行符？