React NextJS：如何在子组件中更新父组件声明的变量？

1. 核心触发问题：按钮点击事件未执行 #

子组件中按钮的onClick写法错误，当前代码仅返回函数引用，并未实际调用处理逻辑：

// 错误写法：仅返回函数，不执行
onClick = {() => handleClick}

修改为以下任意一种正确写法即可：

// 写法1：直接绑定函数（推荐）
onClick={handleClick}

// 写法2：箭头函数内调用（适合需要传参的场景）
onClick={() => handleClick()}

2. 其他潜在问题与优化点 #

（1）对象状态的渲染异常

父组件中直接拼接对象foodObj会输出[object Object]，无法展示实际内容，建议修改渲染代码：

<p>{JSON.stringify(foodObj)}, {input}, {buttonClicked.toString()}</p>

（2）输入值的状态管理不规范

子组件用let query = " "存储输入值，不符合React状态管理逻辑，容易引发组件重渲染时的变量重置问题。建议改用useState声明状态，同时用状态控制输入框值，避免直接操作DOM：

// 子组件中引入useState
import { useState } from "react"

const SearchAndSuggestion = ({foodObjF, inputF, buttonF}) => {
    const [query, setQuery] = useState("")

    const handleClick = () => {
        if(query.trim() !== ""){
            inputF(query)
            foodObjF(prevObj => updateObj(prevObj, query))
            buttonF(true)
            setQuery("") // 用状态清空输入框
        }else{
            console.log("Failed")
        }
    }

    // 将输入框改为受控组件
    <input
        id="myInput"
        className='m-2 w-120 h-8 rounded-2xl'
        value={query}
        onChange={(e) => setQuery(e.target.value)}
    />
}

（3）文件名拼写错误

父组件导入路径为./today_page/search_and_suggestions/page，但子组件实际文件名是seaerch_and_suggestion/page.js（search拼写错误为seaerch），这会导致组件无法正确导入，需修正文件名或导入路径。

内容的提问来源于stack exchange，提问作者Parth Gupta