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渲染了两次

0
0

React零基础入门到实战,完成企业级项目简书网站开发

主流新技术 React-redux,React-router4,贯穿基础语法

5275 学习 · 2496 问题

查看课程