无法将函数传递给React中的子组件

Question

我不明白发生了什么，语法似乎是正确的，但我收到此错误：

类型错误：chooseMessage不是函数

// PARENT COMPONENT

import React, { useState } from 'react'


export default function LayoutMain(props) {

    const [message, setMessage] = useState("Hello World");

    const chooseMessage = (message) => {
        setMessage(message);
    };


    return (
        
        <div>
            <LayoutMenu>
                 <Navigator chooseMessage={chooseMessage} />
            </LayoutMenu>
        </div>
    )
}



//CHILDREN COMPONENT

export default function Navigator({chooseMessage}) {
   
    let msg = 'Goodbye';
    
    return (
  
            <div className='navigator-header' onClick={() => chooseMessage(msg)}>
                 test
            </div>
    )
}

我读过有关提升状态的文章，也观看了一些视频，并一遍又一遍地仔细遵循说明，但没有成功。

#新UDP日期

我刚刚意识到我的代码绝对正确，它一定与编译器或其他东西有关。

Answer 1

看起来代码运行良好。但是，您可以从一个可以作为父控制器的组件控制所有逻辑，并将方法公开为道具以与它们交互，这样管理那里的状态会更容易。

https://codesandbox.io/s/tender-smoke-57v1bk?file=/src/App.js

Answer 2

您可以将 setMessage 从父级传递给子级，然后您可以在父级中使用消息状态，如果您也想在子级中使用它，则可以将消息传递给子级。

export default function LayoutMain (props) {
    const [message, setMessage] = useState('Hello World');

    return (
        <div>
            <LayoutMenu>
                <Navigator setMessage={setMessage} />
            </LayoutMenu>
            <p>{ message }</p>
        </div>
    )
}

export default function Navigator({ setMessage }) {
    const chooseMessage = (message) => {
        setMessage(message);
    };
    
    return (
        <div className='navigator-header' onClick={() => chooseMessage('Goodbye')}>
            test
        </div>
    )
}

Answer 3

如果这对其他人有帮助......我遇到了类似的错误消息（〜无法将函数传递给React中的子组件），但我觉得我“正确地完成了所有事情”。

我发现，在我的父类中，我创建了子类的两个实例，而在我不需要的子类的一个实例中，因此没有将必要的函数作为参数传递给子组件。然而，这是我的问题的根源 - 一旦我纠正了这个问题，错误就消失了。

（阅读：您可以通过将函数从父组件传递到所有子组件或确保在子组件中进行一些检查来解决此问题，以便传递的函数不是绝对必要的。）