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

第一个 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();

    }

}



ABOUTYOU
浏览 132回答 2
2回答

喵喵时光机

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

哈士奇WWW

我看到函数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>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript