父子组件渲染时报错

  • Choerodon平台版本:0.5.0

  • 运行环境(如localhost或k8s):localhost

  • 遇到问题时的前置条件:

  • 问题描述:

    在一个js文件里,创建两个组件(父与子组件)页面加载时报错

  • 修改的数据:

    {
      import React, { Component } from 'react';
    

import { Table, Button, Popconfirm, Input, Icon } from ‘antd’;
import { observer } from ‘mobx-react’;
import { withRouter } from ‘react-router-dom’;

// import asyncRouter from ‘…/…/…/…/…/util/asyncRouter’;
//
// const EditableCell = asyncRouter(() => import(’./EditableCell’));
@observer
class EditableCell extends Component {
state = {
value: this.props.value,
editable: false,
}

handleChange = (e) => {
const value = e.target.value;
this.setState({
value,
});
}

check = () => {
this.setState({
editable: false,
});
if (this.props.onChange) {
this.props.onChange(this.state.value);
}
}

edit = () => {
this.setState({
editable: true,
});
}
render() {
const { value, editable } = this.state;
return (


{
editable ?




:

{value || ’ '}


}

);
}
}

@observer
class EditableTable extends Component {
constructor(props) {
super(props);
this.columns = [{
title: ‘name’,
dataIndex: ‘name’,
width: ‘30%’,
render: (text, record) => (
<EditableCell value={text} onChange={this.onCellChange(record.key, ‘name’)}/>
),
},
{
title: ‘age’,
dataIndex: ‘age’,
},
{
title: ‘address’,
dataIndex: ‘address’,
},
{
title: ‘operation’,
dataIndex: ‘operation’,
render: (text, record) => {
return (
this.state.dataSource.length > 1 ?
(
<Popconfirm title=“Sure to delete?” onConfirm={() => this.onDelete(record.key)}>
Delete

) : null
);
},
}];
this.state = {
dataSource: [{
key: ‘0’,
name: ‘Edward King 0’,
age: ‘32’,
address: ‘London, Park Lane no. 0’,
}, {
key: ‘1’,
name: ‘Edward King 1’,
age: ‘32’,
address: ‘London, Park Lane no. 1’,
}],
count: 2,
};
}
onCellChange = (key, dataIndex) => {
return (value) => {
const dataSource = […this.state.dataSource];
const target = dataSource.find(item => item.key === key);
if (target) {
target[dataIndex] = value;
this.setState({ dataSource });
}
};
}

onDelete = (key) => {
const dataSource = […this.state.dataSource];
this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
}

handleAdd = () => {
const { count, dataSource } = this.state;
const newData = {
key: count,
name: Edward King ${count},
age: 32,
address: London, Park Lane no. ${count},
};
this.setState({
dataSource: […dataSource, newData],
count: count + 1,
});
}

render() {
const { dataSource } = this.state;
const columns = this.columns;
return (


Add


);
}
}
export default withRouter(EditableTable);

}

* 报错信息(请尽量使用代码块的形式展现):

warning.js?8a56:33 Warning: Cannot update during an existing state transition (such as within render or another component’s constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

* 原因分析:
> 

* 疑问:
> 请问,在一个js文件里面,可以同时定义两个class组件么

不建议定义多个class,虽然没有语法错误,但是eslint会报错。你的代码很难辨识,请用代码块包裹。