使用对象的属性作为TextInput的来源

Question

我有我的对象，该对象存储在变量entityData中。我想将属性的当前值从我的对象打印到<SimpleForm>。我以为这很简单，但是由于某些原因，这些值不会打印出来。我的对象看起来像这样：

而且我已经尝试过此代码：

const entityData = this.state.entityData;
return (
<SimpleForm
    form="post-quick-create"
    resource={this.props.resource}
    toolbar={null}
 >
    <TextInput source={entityData.bgColor} label="Background Color" />
    <TextInput source={entityData.caption} label="Caption" />
    <BooleanInput source={entityData.enabled} label="Enabled" />
    <TextInput source={entityData.image} label="Image" />
    <TextInput source={entityData.name} label="Image" />
    <TextInput source={entityData.textColor} label="Text Color" />
    <TextInput source={entityData.type} label="Type" />
    <SaveButton saving={isSubmitting} onClick={this.handleSaveClick}/>
</SimpleForm>

);

我试图以表格的形式console.log entityData变量，并且它及其所有属性都存在。所以我真的很困惑，为什么我不能将这些值打印出来。

任何想法如何解决这个问题？

谢谢你。

更新（整个自定义组件）

const containerStyles = {
  width: '100%',
  height: '100vh',
}

export class TileComponent extends React.Component {
 constructor(props, context) {
  super(props, context);
  this.state = { treeSource: [], openModal: false, entityData: null, saving: false };
 }

  openModal = () => {
    this.setState({ openModal: true });
  };

  closeModal = () => {
    this.setState({ openModal: false });
  };

 customTreeData = () => {
   const { record, source, type, /*...rest*/ } = this.props;
   const defValue = type === "object" ? {} : [];
   const val = !record ? defValue : !source ? record : get(record, source) || defValue;

   if(val.Main !== undefined) {
    const content = val.Main.widgets;
    const keys = Object.keys(content);
    const wholeChildren = keys.map(key => content[key]);
    const childrenName = keys.map(key => {
      const { name } = content[key];
      return { name };
    });

    const tileTree = [
      {
        name: val.Main.name,
        children: childrenName,
        _collapsed: true,
      },
    ];
    this.setState({ treeSource: tileTree, entityData: this.props.record.tiles.Main });
  }
 };

 componentWillMount() {
   this.customTreeData();
 };

 render() {
  const { record, source, type, isSubmitting /*...rest*/ } = this.props;
  const defValue = type === "object" ? {} : [];
  const val = !record ? defValue : !source ? record : get(record, source) || defValue;
  const entityData = this.state.entityData;

  return (
    <div id="treeWrapper" style={containerStyles}>
      {val.Main !== undefined && val.Main.widgets !== undefined ?
        <Tree data={this.state.treeSource} onClick={this.openModal} orientation="vertical" pathFunc="straight"/>
      : <span>Doposud neexsituje žádná dlaždice.</span>}
      <Popup
        open={this.state.openModal}
        closeOnDocumentClick
        onClose={this.closeModal}
      >
        <div className="modal" style={{ height: '80vh', overflow: 'scroll', marginTop: '30px' }}>
            <SimpleForm {...this.props}
              form="post-quick-create"
              resource={this.props.resource}
              toolbar={null}
            >
            <TextInput source={entityData.bgColor} label="Background Color" />
            <TextInput source={entityData.caption} label="Caption" />
            <BooleanInput source={entityData.enabled} label="Enabled" />
            <TextInput source={entityData.image} label="Image" />
            <TextInput source={entityData.name} label="Image" />
            <TextInput source={entityData.textColor} label="Text Color" />
            <TextInput source={entityData.type} label="Type" />
            <SaveButton saving={isSubmitting} onClick={this.handleSaveClick}/>
        </div>
      </Popup>
    </div>
  );
 }
}

Answer 1

SimpleForm组件必须获得以下道具：

SimpleForm.propTypes = {
    basePath: PropTypes.string,
    children: PropTypes.node,
    className: PropTypes.string,
    defaultValue: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
    handleSubmit: PropTypes.func, 
    invalid: PropTypes.bool,
    pristine: PropTypes.bool,
    record: PropTypes.object,
    resource: PropTypes.string,
    redirect: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.bool,
        PropTypes.func,
    ]),
    save: PropTypes.func,
    saving: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
    submitOnEnter: PropTypes.bool,
    toolbar: PropTypes.element,
    undoable: PropTypes.bool,
    validate: PropTypes.func,
    version: PropTypes.number,
};

您必须将记录对象转移到该组件，该组件应包含entityData。