React中通过状态提升将子组件点击值传递给父组件按钮不生效如何解决

核心问题点 #

• 子组件未正确接收父组件传递的setClickedValue属性：当前子组件参数仅声明了showresult和click，未接收父组件传入的状态更新方法
• 父子组件维护了两份完全独立的同名状态：子组件内部单独声明了clickedvalue状态，和父组件的状态无关联，父组件无法读取子组件内部私有状态的值
• 子组件内setState后立即打印会输出旧值：React状态更新是异步操作，调用更新方法后无法立刻获取最新状态值

修正后完整代码 #

import React, { useState } from "react";
import "./styles.css";

// 子组件直接接收父组件传入的状态更新方法，不单独维护私有状态
const Child = ({ setClickedValue }) => {
  const ItemClicked = (e) => {
    // 调用父组件的更新方法修改父级维护的状态
    setClickedValue("Yes");
  };

  return (
    <div className="App">
      <h1>Checkbox Value </h1>
      <span onClick={ItemClicked}>
        <input type="checkbox" /> click me
      </span>
    </div>
  );
};

export default function Parent() {
  // 共享状态完全交由父组件维护
  const [clickedvalue, setClickedValue] = useState("");
  
  return (
    <div className="App">
      <button
        onClick={()=>{console.log(clickedvalue)}}
      >
        See checkbox value
      </button>
      <Child setClickedValue={setClickedValue}  />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者s life