老师为什么我在输入框中输入东西发现只能显示打印的keycode。list下面怎么没能实现呢？

原因是没有提前获取ul,ul里面没有写东西。为什么需要提前在ul里面写东西才能接下来进行keycode操作？自己每次都是直接进行keycode操作发现问题了才到ul里面加内容。但是一直不明白为什么要这样

todolist2.js代码

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

class TodoList2 extends Component{

    constructor(){

        super();

        this.state=({

            inputValue:'hello',

            list:['a','b']

        })

    }

    handleChange(e){

        console.log(e.target.value)

        this.setState({

            inputValue:e.target.value

        })

    };

    handleKeyUp(e){

        console.log(e.keyCode)

        if(e.keyCode===13){

            const list=[...this.state.list,this.state.inputValue]

            this.setState({list:list})

        }

    }

    render(){

       return (

        <Fragment>

            <input

                value={this.state.inputValue}

                onChange={this.handleChange.bind(this)}

                onKeyUp={this.handleKeyUp.bind(this)}

             />

            <ul>

            </ul>

       </Fragment>

       )

    }

}

export {TodoList2};

index.js代码部分

// 解析<app />这样jsx的写法

// Jsx语法里面两种标签，一种普通的html标签，第二种，组件标签首字母大写

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import {TodoList} from './TodoList.js';

import {TodoList2} from './TodoList2';

import {TodoList3} from './TodoList3';

 ReactDOM.render(

    <React.StrictMode>      

        <App />

       <TodoList />

       <TodoList3 />

       <TodoList2 />     

    </React.StrictMode>,

    document.getElementById('root')

 );

在这里输入代码，可通过选择【代码语言】突出显示