React JS中items数组更新正常但列表内容未渲染问题

• 核心错误是列表遍历使用了forEach方法：forEach执行后没有返回值，JSX中无法生成可渲染的DOM节点，React渲染列表必须使用会返回新数组的map方法，这是点击按钮后内容不展示的直接原因。
• 状态更新写法存在隐患：代码里先把items赋值给temp、再对temp做push的操作，本质是直接修改了原状态的引用，违反React状态不可变的要求，即使后续用展开运算符做了一层拷贝暂时能触发更新，后续很容易出现状态更新不触发重渲染的问题。
• 额外不规范点：输入框没有绑定value属性关联currItem状态，属于非受控组件的不严谨写法，添加完条目后输入框内容不会自动清空，交互体验差。

import { useState } from 'react';

function ToDo(){
    const [items, setItems] = useState([])
    const [currItem, setCurrItem] = useState('')

    const handleClick = () => {
        if(!currItem.trim()) return
        // 直接生成新数组更新状态，不修改原状态引用
        setItems([...items, currItem])
        // 添加后清空输入框
        setCurrItem('')
    }
    return(
        <div>
        <input 
            type='text' 
            value={currItem}
            onChange={(e) => setCurrItem(e.target.value)}
        /> 
        <br/>
        <button onClick={handleClick}>Add Item</button>
        <br/>
        <div> 
            {
                // 用map遍历返回JSX节点，给列表项加key消除控制台警告
                items.map((item, index) => <div key={index}>{item}</div>)
            }
        </div>
        </div>
    )
}

内容的提问来源于stack exchange，提问作者Naveen Udhay