道具值仅在第二次单击按钮后才会填充

Question

在父功能组件中：

let [response, setresponse] = useState("undefined");

samplefunction = () => {
    setresponse("completed click");
}

在子组件中：

<Button onClick={
    ()=> {
             props.samplefunction();
             console.log(props.response);
         }
}>Sample button</Button>

问题是 props.response 仅在单击按钮两次后才给出值 = 完成单击。单击后，它显示值 = undefined 这是父组件的默认值

Answer 1

您是在第一次点击时更新状态。状态更改会触发组件的重新渲染，这需要时间并且不会“内联”发生。所以

props.samplefunction();
console.log(props.response);

到您记录状态时它仍然是旧状态，然后组件会重新呈现并且可以访问新状态。只需使用 {{ props.response }} 呈现状态或将其记录在组件代码中，而不是点击处理程序或 JSX，您会发现您做的恰到好处。

props value is populating only after second click of button