2

我在 Rest 1.2 上使用管理员，我想为仪表板创建一个自定义的“我的帐户页面”。所以我为此创建了一个自定义路由，并为 API 准备了一个自定义查询，它运行良好。但是当我想从this.stateEdit Component 中获取值时，我遇到了 error Cannot read property '_currentElement' of null。我应该如何将自定义道具传递给编辑组件？我的自定义页面如下所示：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import AvatarUpload  from './AvatarUploadComponent';
// import FlatButton from 'material-ui/FlatButton';
import { showNotification as showNotificationAction } from 'admin-on-rest';
import { push as pushAction } from 'react-router-redux';
import {TextField, RaisedButton} from 'material-ui';
import { GET_ONE, UPDATE, SimpleForm, DisabledInput, LongTextInput, Edit } from 'admin-on-rest';
import restClient from '../RestClient';

const initialState = {
  user: {
    first_name: "",
    last_name: "",
    current_password: "",
    new_password: "",
    confirm_password: "",
    avatar_url: ""
  }
};

export const MyAccountEdit = (props) => (
  <Edit title="My account" {...props}>
    <SimpleForm>
      <DisabledInput source="first_name" />
      <LongTextInput source="last_name" />
      <LongTextInput source="first_name" />
    </SimpleForm>
  </Edit>
);

class MyAccountForm extends Component {
  constructor(props) {
    super(props);
    this.state = initialState;

    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.componentWillMount = this.componentWillMount.bind(this);
  }

  componentWillMount = () => {
    const { showNotification } = this.props;
    restClient(GET_ONE, 'users', { id: 2 })
      .then((req) => {
        this.setState({user: req.data});
        showNotification('Account has been getted');
        // push('/myaccount');
      })
      .catch((e) => {
        console.error(e);
        showNotification('Error: Account hasn\'t been getted', 'warning');
      });
  };

  handleChange = (event, newValue) => {
    event.persist(); // allow native event access (see: https://facebook.github.io/react/docs/events.html)
    // give react a function to set the state asynchronously.
    // here it's using the "name" value set on the TextField
    // to set state.person.[firstname|lastname].
    this.setState((state) => state.user[event.target.name] = newValue);
  };

  handleClick = () => {
    const { push, record, showNotification } = this.props;
    // const updatedRecord = { ...record, is_approved: true };
    console.log(this.state);
    restClient(UPDATE, 'users', { id: 2, data: this.state })
      .then(() => {
        showNotification('Account has been updated');
        push('/myaccount');
      })
      .catch((e) => {
        console.error(e);
        showNotification('Error: Account hasn\'t been updated', 'warning');
      });
  };

  render() {
    return (<div>
      <p>My Account</p>
      <img src={this.state.user.avatar_url} />
      <p>first name: {this.state.user.first_name}</p>
      //below is the problem
      <MyAccountEdit {...this.state.user}/>
    </div>);
  }
}

MyAccountForm.propTypes = {
  push: PropTypes.func,
  record: PropTypes.object,
  showNotification: PropTypes.func,
};

export default connect(null, {
  showNotification: showNotificationAction,
  push: pushAction,
})(MyAccountForm);
4

0 回答 0