import { Input, Box, Text, Divider, Button } from '@chakra-ui/react';
import { useState } from 'react';
export default function SearchGithub() {
const [username, setUsername] = useState('');
const [data, setData] = useState({});
async function handleGithubSearch() {
await fetch('/api/github', {
method: 'POST',
body: JSON.stringify(username),
})
.then((response) => response.json())
.then((data) => setData(data));
console.log(data);
}
function handleUsername(e) {
setUsername(e.target.value);
}
return (
<Box>
<Text fontSize="lg"> Search for Github Repositories!</Text>
<Divider />
<Input
placeholder="Enter a github username"
onChange={handleUsername}
value={username}
/>
<Button
colorScheme="telegram"
position="fixed"
ml="3px"
onClick={handleGithubSearch}
>
Submit
</Button>
{data ? <h1> {data.login}</h1> : null}
</Box>
);
}
嘿，我正在嘗試制作這個 github 搜索應用程式。每當我單擊提交用戶名并帶回資料時，該功能直到第二次單擊才會觸發。我很好奇為什么。
uj5u.com熱心網友回復：
正如安迪所說，設定后無法記錄狀態，但可以使用效果掛鉤來完成。根據檔案：
函陣列件的主體中不允許發生突變、訂閱、計時器、日志記錄和其他副作用。相反，使用 useEffect。傳遞給 useEffect 的函式將在渲染提交到螢屏后運行。默認情況下，效果會在每次完成渲染后運行，但您可以選擇僅在某些值發生更改時觸發它們。
uj5u.com熱心網友回復：
你的功能
async function handleGithubSearch() {
await fetch('/api/github', {
method: 'POST',
body: JSON.stringify(username),
})
.then((response) => response.json())
.then((data) => setData(data));
console.log(data);
}
是異步函式，即意味著它在執行程序中需要等待，所以在你的按鈕上你需要等待這個承諾完成，下面是我將如何完成它
<Button
colorScheme="telegram"
position="fixed"
ml="3px"
onClick={async () => {
await handleGithubSearch()
}}
>
Submit
</Button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/421939.html
標籤：
上一篇：如果我需要一個物件中的多個影像，我需要如何設定一個陣列？
下一篇：不同頁面的vuejs呼叫方法函式