mount报错

来源：7-1 BDD 的概念以及与 TDD 的对比

反抗刀俎的小鲜肉

2021-02-16

图片描述

老师，我mount渲染报错，但换成shallow，render方法就可以。这个报错信息网上搜了没搜到相关问题。我检查依赖了，jsdom什么的都齐全。这个能是什么问题讷？

ToDoList代码

import React, { Component } from 'react';
import Head from './components/Head/index'
import List from './components/List/index'
class ToDoList extends Component {
    constructor(props){
        super(props)
        this.addItem = this.addItem.bind(this)
        this.changeStatus = this.changeStatus.bind(this)
        this.deleteItem = this.deleteItem.bind(this)
        this.inputBlurChange = this.inputBlurChange.bind(this)
        this.handleInputChange = this.handleInputChange.bind(this)
        this.state = {
            list: []
        }
    }

    addItem(value){
        let { list } = this.state
        list.unshift({ value, status: 'div' });
        this.setState({ list })
    }

    deleteItem(index){
        let { list } = { ...this.state };
        list.splice(index, 1)
        this.setState({list})
    }

    changeStatus(index){
        let { list } = this.state;
        if (list[index].status === 'div') {
            list[index].status = 'input'
        }
        this.setState({ list })
    }

    inputBlurChange(index){
        let { list } = { ...this.state };
        if (list[index].status === 'input') {
            list[index].status = 'div'
        }
        this.setState({ list })
    }

    handleInputChange(index, value){
        let { list } = { ...this.state }
        list[index].value = value
        this.setState({ list })
    }

    render(){
        const {list} = this.state;
        return (
            <div>
                <Head onAddItem={this.addItem} />
                <List 
                    list={list} 
                    onDeleteItem={this.deleteItem} 
                    onChangeStatus={this.changeStatus} 
                    onInputBlur={this.inputBlurChange}
                    onInputChange={this.handleInputChange}
                />
            </div>
        );
    }
    
}

export default ToDoList

写回答

2回答