第一個 tsx 代碼正確顯示 state.map，而第二個代碼不顯示任何內(nèi)容。為什么？這兩段代碼以相同的方式做同樣的事情，但仍然正確顯示了一個列表，而另一個 state.map 從未渲染過任何東西，盡管進(jìn)行了許多調(diào)整import React from 'react';import './App.css'const { useReducer } = require("react");function reducer(state, action) {  switch (action.type) {    case 'add': return [...state, action.item]    case 'rm': return [...state.slice(0, action.index), ...state.slice(action.index + 1, state.length)]    default: throw new Error();  }}function Todo() {  const [state, dispatch] = useReducer(reducer, [])  return (    <div className="App">      <h1>TO DO</h1>      <p>        <button onClick={() => dispatch({ type: 'add', item: prompt('?') })}>+</button>        <button onClick={() => dispatch({ type: 'rm', index: prompt('?') - 1 })}>-</button>        <button onClick={() => dispatch({ type: 'rm', index: prompt('?') - 1 })}></button>        <ol>{          state.map((item) => (            <>{item}</>          ))}</ol>      </p>    </div>  )}export default Todo/////////////////////////////////////////////////////////////////import React from 'react';const { useReducer } = require("react");function reducer(state, action) {    switch (action.type) {        case 'add': return [...state, action.item]        case 'rm': return [...state.slice(0, action.index), ...state.slice(action.index + 1, state.length)]        default: throw new Error();    }}