Javascript 什么会导致react中的state.map（foo=>；<；{foo}<；/>；）显示不一致？
第一个jsx/tsx代码正确显示state.map，为什么第二个代码显示noting。为什么？这两段代码以相同的方式执行相同的操作，但仍然正确显示了一个列表，而另一个state.map从未呈现任何内容，尽管进行了许多调整Javascript 什么会导致react中的state.map（foo=>；<；{foo}<；/>；）显示不一致？,javascript,reactjs,typescript,jsx,Javascript,Reactjs,Typescript,Jsx,第一个jsx/tsx代码正确显示state.map，为什么第二个代码显示noting。为什么？这两段代码以相同的方式执行相同的操作，但仍然正确显示了一个列表，而另一个state.map从未呈现任何内容，尽管进行了许多调整 import React from 'react'; import './App.css' const { useReducer } = require("react"); function reducer(state, action) { switch
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
从“React”导入React；
导入“./App.css”
const{useReducer}=require（“react”）；
功能减速机（状态、动作）{
开关（动作类型）{
案例“添加”：返回[…状态，操作.项]
案例“rm”：返回[…state.slice（0，action.index），…state.slice（action.index+1，state.length）]
默认值：抛出新错误（）；
}
}
函数Todo（）{
const[state，dispatch]=useReducer（reducer，[]）
返回(
做
分派（{type:'add'，item:prompt（'？'）}）}>+
分派（{type:'rm'，index:prompt（'？'）-1}）}>-
分派（{type:'rm'，index:prompt（'？'）-1}）}>
{
state.map（（项目）=>(
{item}
))}
)
}
导出默认待办事项
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
从“React”导入React；
const{useReducer}=require（“react”）；
功能减速机（状态、动作）{
开关（动作类型）{
案例“添加”：返回[…状态，操作.项]
案例“rm”：返回[…state.slice（0，action.index），…state.slice（action.index+1，state.length）]
默认值：抛出新错误（）；
}
}
活动费用（）{
const[state，dispatch]=useReducer（reducer，[]）
返回(
费用{州}
分派（{type:'add'，item:prompt（'Expense？）+prompt（'Amount？）}>+
分派（{type:'rm'，index:prompt（'line number？'））-1}>-
费用
数量
{state.map（（项）=>{
{item}
})}
全部的
)
}
出口违约费
提示符declare function prompt(message?: string, _default?: string): string | null;
<button onClick={() => dispatch({ type: 'rm', index: prompt('line number?') - 1 })}>-</button>
dispatch（{type:'rm'，index:prompt（'line number'））-1}>-
状态useReducer