为什么 state.map(foo => <>{foo}</>) 没有显示任何东西？

Question

第一个 tsx 代码正确显示 state.map，而第二个代码不显示任何内容。为什么？这两段代码以相同的方式做同样的事情，但仍然正确显示了一个列表，而另一个 state.map 从未渲染过任何东西，尽管进行了许多调整

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();

    }

}

Answer 1

在 React 中，你需要从 map 返回一个组件来渲染它。第一个示例默认返回，因为您使用了 paranthenses，而第二个示例则没有。括号需要显式的 return 语句。

Answer 2

我看到函数prompt是声明的：declare&nbsp;function&nbsp;prompt(message?:&nbsp;string,&nbsp;_default?:&nbsp;string):&nbsp;string&nbsp;|&nbsp;null;您可以稍后删除 return value 的 type assign 和 validation int ：&nbsp;<button&nbsp;onClick={()&nbsp;=>&nbsp;dispatch({&nbsp;type:&nbsp;'rm',&nbsp;index:&nbsp;prompt('line&nbsp;number?')&nbsp;-&nbsp;1&nbsp;})}>-</button>