我将状态钩子作为道具传递给我的组件，我的'setCity'工作得很好，但当我尝试实现setFlag时，我得到一个错误说"Searchbar。jsx:15未捕获的TypeError: setFlag不是一个函数">
那么为什么我可以设置city的值而不能设置flag的值呢?我把道具从App传递给footer, footer传递给searchbar。
function App(){
const [city, setCity] = useState("");
const [flag, setFlag] = useState("");
return (
<div className='container'>
<Header className='header' />
<Body className='body' city={city} flag={flag}/>
<Footer className='footer' setCity={setCity} setFlag={setFlag}/>
</div>
);
}
function Footer({setCity}, {setFlag}){
return(
<div className='footer'>
Footer
<Searchbar className='searchbar' setCity={setCity} setFlag={setFlag}/>
</div>
)
}
function Searchbar({setCity}, {setFlag}){
handleChange = (e) =>{
e.preventDefault();
console.log(e.target.value);
setCity(e.target.value);
}
handleSubmit = (e) => {
e.preventDefault();
console.log("submitted");
setFlag(false);
}
return(
<div className='searchbar'>
<form>
<select defaultValue="default" onChange={handleChange}>
<option value="default" disabled>Choose a state...</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
...
</select>
<button type="button" onClick={handleSubmit}>Search</button>
</form >
</div>
);
};
所有的props都作为组件的第一个参数传递，
function Searchbar({setCity}, {setFlag}){
应该
function Searchbar({setCity, setFlag}){
同样适用于Footer
我也遇到过类似的问题。其中函数(这里是setCity, setFlag)未被识别为子函数的子函数。我的解决方案，不使用typescript或propTypes库是包装setCity和setFlag的新函数在第一个子，然后将这些新函数传递给下一个子。
你还在面对吗
Uncaught TypeError: setCity is not a function
const { setCity=()=>{}, setFlag=()=>{} } = props