问题描述：

将生成 li 的部分封装成方法后，在render中使用this.getULItems调用，控制台报警告，且列表出不来

相关截图：

相关代码：

TodoList.js

import React, {Component, Fragment} from 'react';
import './TodoList.css';

class TodoList extends Component {
    constructor(props) {
        super(props);

        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleInputKeyUp = this.handleInputKeyUp.bind(this);

        // 起始值
        this.state = {
            inputValue: '',
            list: []
        }
    }

    getULItems() {
        return this.state.list.map((value, index) => {
            return (
                <li
                    className="listItem"
                    key={index}
                    onClick={this.handleItemClick.bind(this, index)}
                >
                    {value}
                </li>
            )
        })
    }

    // 文本框内容改变事件
    handleInputChange(e) {
        this.setState({
            inputValue: e.target.value
        });
    }

    // 点击回车键将input中的内容添加到列表
    handleInputKeyUp(e) {
        if(e.keyCode === 13 && this.state.inputValue.trim() !== '') {
            this.setState({
                inputValue: '',
                list: [...this.state.list, this.state.inputValue]
            });
        }
    }

    // 列表项点击删除该项
    handleItemClick(index) {
        const list = [...this.state.list];
        list.splice(index, 1);
        this.setState({list});
    }

    render() {
        return (
            <Fragment>
                <label htmlFor="itemName">请输入事项名称：</label>
                <input
                    id="itemName"
                    value={this.state.inputValue}
                    onChange={this.handleInputChange}
                    onKeyUp={this.handleInputKeyUp}
                />
                <ul>
                    {
                        // this.state.list.map((value, index) => {
                        //     return (
                        //         <li
                        //             className="listItem"
                        //             key={index}
                        //             onClick={this.handleItemClick.bind(this, index)}
                        //         >
                        //             {value}
                        //         </li>
                        //     )
                        // })
                        this.getULItems
                    }
                </ul>
            </Fragment>
        );
    }
}

export default TodoList;

相关代码：

index.html

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import TodoList from './TodoList';

ReactDOM.render(
  <React.StrictMode>
    <TodoList />
  </React.StrictMode>,
  document.getElementById('root')
);