React-Admin动态更新输入值失败，求排查解决方法

为什么你的代码无法正常工作？ #

主要有几个核心问题导致你看到currentForm是空数组：

1. setState的异步特性
   React的setState是异步批量更新的，如果你在调用setState后立刻console.log(this.state.currentForm)，你拿到的是更新前的旧状态（也就是你初始化的空数组[]）。只有在setState的回调函数里，才能访问到真正更新后的state。

2. 多余且易混淆的两次setState调用
   你先把currentForm设为this.props.record，紧接着又设为value.updated_src。React会合并这两次相同state的更新操作，最终currentForm只会是updated_src，但第一次的赋值完全是多余的，反而容易让你误解state的更新流程。

3. 初始state的类型不匹配
   你把currentForm初始化为数组[]，但实际要存储的是对象类型的record或更新后的updated_src。虽然JavaScript允许类型变更，但这可能导致后续渲染或逻辑判断出现异常。

修复步骤 #

1. 简化onChange方法，正确获取更新后的state

去掉多余的setState调用，直接设置为updated_src，并在回调里查看更新后的state：

onChange = (value) => {
  const { updated_src } = value;
  // 直接设置更新后的数据
  this.setState({ currentForm: updated_src }, () => {
    // 在这里才能拿到真正更新后的state
    console.log(this.state.currentForm);
  });
}

2. 修正初始state的类型与默认值

在constructor里用传入的props.record初始化currentForm，如果没有则用空对象，避免数组与对象类型混淆：

constructor(props, context) {
  super(props, context);
  this.state = { 
    showPanel: false, 
    currentForm: props.record || {} // 用props.record初始化，或空对象
  };
}

3. 让JsonInput显示本地state的更新值

你当前的JsonInput一直使用this.props.record作为数据源，所以即使你更新了currentForm，界面也不会变化。应该把src改为this.state.currentForm：

{this.state.currentForm && <JsonInput 
  src={this.state.currentForm} 
  name={null} 
  displayDataTypes={false} 
  onKeyPressUpdate={true} 
  displayObjectSize={false} 
  onEdit={this.onChange} 
/>}

4. （可选）同步更新react-admin的表单数据

如果你需要把修改后的数据提交回react-admin的表单（比如在Edit页面中），你需要借助redux-form的change action来更新表单字段，因为react-admin的表单是由redux-form管理的，组件本地state不会自动同步到表单值里：

首先导入相关依赖并连接redux：

import { connect } from 'react-redux';
import { change } from 'redux-form';

// ...

onChange = (value) => {
  const { updated_src, change } = this.props;
  // 替换'record-form'为你的表单名，'jsonData'为你要更新的字段名
  change('record-form', 'jsonData', updated_src);
  // 同时更新本地state用于显示
  this.setState({ currentForm: updated_src });
}

// 连接redux-form的change action
export default connect(null, { change })(JsonEditButton);

这样修改后，你的组件就能正确处理动态更新，并且state的内容也能正常被获取到了。

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