react中令人恼火的API错误，无法解决
react中令人恼火的API错误，无法解决
提问于 2021-01-29 03:18:10
我在一个输入框中设置了一个带有两个搜索按钮的API调用。每个按钮都会向api调用添加一些使用状态，下面的代码应该会演示这一点。这两个调用都独立工作，并显示正确的信息。
如果用户点击了“通配符”按钮，结果就会显示出来，但当点击“标准设置”按钮时，结果不会重新呈现正确的结果，直到第二次按下该按钮(反之亦然)。
为了简化问题，我删除了不相关的代码。
感谢您的任何帮助
Home.js -将api调用、状态和函数作为道具传递给searchBar。
export const Home = () => {
const [searchTerm, setSearchTerm] = useState('')
const [wild, setWild] = useState('')
let accessToken;
const getCards = async() => {
try {
await getToken()
const response = await fetch(`https://eu.api.blizzard.com/hearthstone/cards/?collectible=1${wild}&textFilter=${searchTerm}&locale=en-US$access_token=${accessToken}`, {
headers: {
Authorization: `Bearer ${accessToken}`
}})
const data = await response.json()
const {cards} = data
if (cards){
const newCards = cards.map((card) => { ** some data i want ** }
setCards(newCards)
}
} catch (error) {
console.log(error)
}
}
return (
<SearchBar getCards = {getCards}
setWild = {setWild}
setSearchTerm = {setSearchTerm} />
</div>
</div>
)
}SearchBar组件-再次为了这个问题而精简
export const SearchBar = (props) => {
const searchBox = useRef('')
const handleClickWild = (e) => {
e.preventDefault()
props.setWild('')
props.getCards()
}
const handleClickStandard = (e) => {
e.preventDefault()
props.setWild('&set=standard')
props.getCards()
}
const handleChange = (e) => {
props.setSearchTerm(e.target.value)
}
return (
<form>
<input className = 'input-search'
type = 'text'
placeholder = 'Search for Cards by Name...'
ref = {searchBox}
onChange = {handleChange} />
<div className = 'search-buttons'>
<input type = 'submit' className = 'button-search' onClick = {handleClickWild} value = 'Wild Cards' />
<input type = 'submit' className = 'button-search' onClick = {handleClickStandard} value = 'Standard Set' />
</div>
</form>
)
}回答 2
Stack Overflow用户
发布于 2021-01-29 03:57:15
你必须在这里使用useEffect钩子。
你可以在依赖数组中使用getCards，只要你改变了searchTerm的值，使用效果就会自动调用你的getCards函数。
正如您在注释中提到的，您希望在用户搜索任何内容时显示更改，然后在简单变量中保持不变，并在useEffect中添加搜索词，如果需要，可以在useEffect依赖项数组中同时添加这两个项
useEffect(()=> {
getCards()
}, [searchTerm])从SearchBar组件中设置wild后，只需删除props.getCards的显式调用即可。
Stack Overflow用户
发布于 2021-01-29 04:54:03
我按照建议用useEffect解决了这个问题，但我添加了一个'if (hasSearched)‘作为用户以前搜索过的状态值，以防止页面加载时自动调用API
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65943846
复制相关文章
相似问题
腾讯云开发者
