时间戳

首页 > 解决方案 > React Hooks：传递状态道具不是函数吗？

javascript - React Hooks：传递状态道具不是函数吗？

问题描述

我将状态挂钩作为道具传递给我的组件，我的“setCity”工作得非常好，但是当我尝试实现 setFlag 时，我收到一条错误消息“Searchbar.jsx:15 Uncaught TypeError: setFlag is not a function”

那么为什么我可以设置城市的值但不能设置标志呢？我将道具从“应用程序”传递到“页脚”，然后传递到“搜索栏”。

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>
    );
};

标签： javascriptreactjsreact-hooksreact-propsreact-state-management

解决方案

所有的道具都作为组件的第一个参数传递，

function Searchbar({setCity}, {setFlag}){

应该

function Searchbar({setCity, setFlag}){

同样申请Footer

推荐阅读