Question

已编辑：已解决，参数中缺少卷曲的褶皱

希望您可以澄清以下问题：我有父级组件：

function App() {
const [change, setChange] = useState(true);


const handleChange=(mode)=>{
  setChange(mode);
  console.log('change',change);
  
}

  return (
    <>
    
      <Navigation modes={handleChange}/>

，并且我正在尝试将handlechange发送到子组件以更改“更改”状态（对不起，命名）。我有如下子组件：

export default function Navigation({modes}) {
    const [mode, setMode] = useState(true);

const handleMode=(mode)=>{
        setMode(mode)
    }

useEffect(() => {
        modes(mode);
       }, [ mode ]);

return (
        
            
                <div className="nav__switch">
                    <Switch handleMode={handleMode}/>
                </div>

最后一个组件，将更新模式的组件：

export default function Switch({modes}) {
    const [mode, setMode] = useState(true);


    useEffect(() => {
        modes(mode)
      }, [mode]);

    const modeChange=()=>{

        mode?setMode(false):setMode(true);
        console.log(mode)
    }

有一个modeChange函数，它会更改模式状态，该状态将作为父元素上函数的参数，但是我收到错误消息，说“ modes”不是函数，我在控制台上记录了该消息，我可以看到它是具有默认属性的对象。

有人知道我在做什么错吗？

谢谢

Answer 1

我认为您做对了，但您没有等到它设置状态。您在进行更改之前正在控制台记录日志。您需要等到它改变为止。我认为您应该稍等片刻，看看是否可行。用设置间隔功能包装console.log并查看是否有差异

setTimeout(function(){ console.log(mode); }, 3000);

在这种情况下，您必须使用js promises，async，await等待执行，直到任务完成。 checkout the documentation about promises here

将功能发送到子组件挂钩

1 个答案: