什么會導致 state.map(foo => <>{foo}</> ) 在反應中顯示？

Question

第一個 jsx/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();
    }
}
function Fees() {
    const [state, dispatch] = useReducer(reducer, [])
    return (
        <body>
            <h1>Fees {state}</h1>
            <p>
                <button onClick={() => dispatch({ type: 'add', item: prompt('Expense?') + prompt('Amount?') })}>+</button>
                <button onClick={() => dispatch({ type: 'rm', index: prompt<number>('line number?') - 1 })}>-</button>
                <table>
                    <tr>
                        <th>
                            Expense
                            </th>
                        <th>
                            Amount
                            </th>
                        {state.map((item) => {
                            <td> {item}</td>
                        })}
                    </tr>
                    <tr><td>Total</td></tr>
                </table>
            </p>
        </body>
    )
}
export default Fees

Answer 1

我看到函數prompt是聲明：

declare function prompt(message?: string, _default?: string): string | null;

您可以稍后刪除返回值的類型分配，僅和驗證 int ：

 <button onClick={() => dispatch({ type: 'rm', index: prompt('line number?') - 1 })}>-</button>

Answer 2

在 React 中，您需要從 map 返回一個組件以使其呈現。 第一個示例默認返回，因為您使用了括號，而第二個示例沒有。 括號需要顯式的 return 語句。

什么會導致 state.map(foo => <>{foo}</> ) 在反應中顯示？

問題描述

2 個解決方案

解決方案1
0 2020-09-10 09:01:14

解決方案2
0 2021-12-12 18:37:52

什么會導致 state.map(foo =&gt; &lt;&gt;{foo}</> ) 在反應中顯示？

問題描述

2 個解決方案

解決方案1 0 2020-09-10 09:01:14

解決方案2 0 2021-12-12 18:37:52

什么會導致 state.map(foo => <>{foo}</> ) 在反應中顯示？

解決方案1
0 2020-09-10 09:01:14

解決方案2
0 2021-12-12 18:37:52