instance.render is not a function 报错
来源:6-1 UI组件和容器组件
powerful_girl
2021-08-11
老师,根据课程把 todolistui 拆出来后,报了这个错误,还请老师指点一二。
代码
import React, {Component} from 'react';
import {getInputChangeAction, addTodoItemAction, deleteTodoItemAction} from './store/actionCreators';
import store from './store/index.js';
import TodoListUI from './TodoListUI';
class TodoList extends Component {
constructor(props){
super(props);
this.state = store.getState();
this.handleInputChange = this.handleInputChange.bind(this);
this.handleStoreChange = this.handleStoreChange.bind(this);
this.handleBtnClick = this.handleBtnClick.bind(this);
this.handleDeleteItem = this.handleDeleteItem.bind(this);
store.subscribe(this.handleStoreChange);
}
render(){
return (
<TodoListUI
inputValue={this.state.inputValue}
list={this.state.list}
handleInputChange={this.handleInputChange}
handleBtnClick={this.handleBtnClick}
handleDeleteItem={this.handleDeleteItem}
/>
)
}
handleInputChange(e){
const action = getInputChangeAction(e.target.value);
store.dispatch(action);
}
handleStoreChange(){
this.setState(store.getState());
}
handleBtnClick(){
const action = addTodoItemAction();
store.dispatch(action);
}
handleDeleteItem(index){
const action =deleteTodoItemAction(index);
store.dispatch(action);
}
}
export default TodoList
import React, {Component} from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
class TodoListUI extends Component{
render(){
return (
<div style={{marginTop:'10px', marginLeft:'10px'}}>
<div>
<Input
//通过 props 来接受父组件传递的值。这在哪里讲过的/?
value={this.props.inputValue}
placeholder='todo info'
style={{width:300, marginRight:'10px'}}
onChange={this.props.handleInputValue}
/>
<Button onClick={this.props.handleBtnSubmit} type="primary">Submit</Button>
</div>
<List
style={{marginTop: '10px', width:'300px'}}
bordered
dataSource={this.props.list}
renderItem={(item,index) => (
<List.Item onClick={(index)=>{this.props.handleItemClick(index)}}>{item}</List.Item>
)}
/>
</div>
)
}
}
export default TodoListUI
写回答
1回答
-
何为百年孤独
2021-08-28
你UI组件要写成函数形式,不然你看render渲染了两次
00
相似问题