React函数组件中如何在其他函数内访问state状态值

你的代码里handleClick读取state.x的写法本身没有问题，取值异常是以下2个核心错误+1个拼写问题导致的：

• 输入框value属性绑定错误：误将状态更新函数setState当成状态对象绑定，写为value={setState.x}。setState是用于更新状态的函数，本身不存在x属性，会导致输入框无法正常和状态双向同步
• 输入事件的状态更新逻辑错误：onChange回调中写的setState({ ...state, [state.x]: e.target.value })逻辑错误，[state.x]是取当前state.x的值作为属性键名，初始state.x为空字符串，相当于每次输入都给state加了个空字符串键存值，根本没有更新x属性本身，导致state.x始终是初始的空值
• （非阻断优化）输入事件处理函数名拼写错误：handleChnage正确拼写应为handleChange，不影响代码运行但不符合命名规范

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

function About() {
  const [state, setState] = useState({
    x: "",
    output: [],
  });
  // 输入框change事件
  const handleChange = (e) => {
    // 正确更新state.x字段
    setState({ ...state, x: e.target.value });
    console.log(e.target.value);
  };
  // 按钮点击事件
  const handleClick = () => {
    alert(state.x);
  };

  return (
    <>
      <h1>This is about about </h1>
      <input
        placeholder="Enter a number"
        // 正确绑定状态值到输入框
        value={state.x}
        onChange={handleChange}
      />
      <button onClick={handleClick}>get Table</button>
    </>
  );
}

export default About;

修复后，输入框输入内容时会正确同步更新到state.x，点击按钮触发handleClick时，函数通过闭包可以直接读取到最新的state.x值，正常弹窗展示输入的内容。后续如果需要更新state里的其他字段，只要保留...state展开旧状态的写法，再赋值对应字段即可，不会覆盖其他已存储的状态数据。

内容的提问来源于stack exchange，提问作者Nitesh Tiwari