将函数传递给子组件反应时出错（未捕获（承诺中）类型错误：结果不是函数）

Question

我想将子组件上的 api 调用的结果传递给父组件：

家长：

const Parent = () => {

    function logFunction(resultFromAPI) {
        console.log(resultFromAPI);
    }

    return(
        <Child result={ logFunction }  />
    )
}

export default Parent

子组件

const Child = ({result}) => {

    const [values, setValues] = useState({
        name: ''
    })


    const handleChange = (name) => (event) => {
        setValues({ ...values, [name]: event.target.value });
    };


    const handleSubmit = async (e) => {
        e.preventDefault();
        
        const response = await createApi(values);
        if (response.data.message) {
            setValues({
                name: "",
            });

            result(response.data); //Uncaught (in promise) TypeError: result is not a function
            
        }

        if (response.data.error) {
            toast("error", response.data.message);
        }
    };


    return(
    <form onSubmit={handleSubmit}>
        <Input 
            name='name'
            value={name}
            onChange={handleChange("name")}
         />
    </form>
    <button type='submit'>Submit</button>
    )
}

export default Child

表单将按钮 clic 上的“name”值发送到函数“handleSubmit”，该函数调用 API。

然后，我想从子道具中调用“结果”函数。将 api 的结果放在函数上并将其记录在父级上。

但我收到错误：

Uncaught (in promise) TypeError: result is not a function

Answer 1

错误消息表明从父组件传递到子组件的“result”属性不是一个函数。

您可以尝试以下一些方法：

验证传递给子组件的“result”属性的类型： console.log(结果类型);

确保“logFunction”函数作为 prop 传递给子函数

component: return ( <Child result={logFunction} /> );

确保您正确调用“结果”函数：

result(response.data);

如果尝试这些步骤后仍然遇到错误，请检查其余代码并确保没有其他问题。

Answer 2

我最近在代码中遇到了同样的问题，我没有注意到我正在渲染多个子项，并且没有将道具传递给所有子项。

确保将函数传递到需要的地方，也可以尝试 console.logging