0 javascript reactjs react-props react-state-management react-hooks
我将状态挂钩作为道具传递给我的组件，并且我的“setCity”工作得很好，但是当我尝试实现 setFlag 时，我收到一条错误消息“Searchbar.jsx:15 Uncaught TypeError: setFlag is not a function”
那么为什么我可以设置city的值而不是flag呢？我将道具从“应用程序”传递到“页脚”，然后再传递到“搜索栏”。
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
| 归档时间： |
|
| 查看次数： |
3323 次 |
| 最近记录： |