提问人：Jayant Verma 提问时间：10/20/2023 最后编辑：evolutionxboxJayant Verma 更新时间：10/23/2023 访问量：63
当我尝试打印无序列表中的所有数组项时，React 中的 Array.map（） 出现问题
Having problem with Array.map() in React when I try to print all array items in unordered list
问：
代码如下：
let count = 0;
function GenerateValue(tasks) {
count += 1;
let someValue = Math.random() * 10;
tasks.push({key : count, value : someValue});
console.log(tasks);
}
function RenderTasks() {
const tasks = [];
return (
<>
<button onClick={() => GenerateValue(tasks)}>Add New Item</button>
<h1>List</h1>
<ul>
{<li key = {count}>{tasks.map((msg) => msg.value)}</li>}
{/*tasks.map((msg) => <li key = {count}>{msg.value}</li>)*/}
</ul>
</>
);
}
export default RenderTasks;
这是输出：
现在对我的代码进行一些解释： 这只是我在学习 React 时制作的一个测试程序。该代码只是生成一个随机数并将其添加到名为“tasks”的数组中。现在我想以列表形式在屏幕上打印所有“任务”项目。正如您在输出中看到的那样，这些项目也在数组中生成和添加（您可以在控制台中看到）。但是我无法将它们打印在屏幕上。现在，我认为我缺少一些非常简单易行的错误，但我厌倦了一遍又一遍地检查它，并希望得到您的帮助。所以请帮我弄清楚问题出在哪里。
另请注意，在我尝试打印已注释的列表项的代码下方还有另一行代码。我也试过了，但也没有用。以下是我尝试该方法时的输出：
我将等待我们善良的社区的回应。
至于我尝试过的内容，它已经显示在代码中。由于我是从 w3schools 学习的，你可以看到我的评论行和他们的 React 教程中的行完全一样，但有趣的是，它在他们的程序中有效，但在我的程序中不起作用。
这是我正在谈论的行，它在我的代码中：{tasks.map((msg) => <li key = {count}>{msg.value}</li>)}
这是他们自己程序的 w3schools 版本：{cars.map((car) => <Car key={car.id} brand={car.brand} />)}
您也可以在此处查看他们的程序：检查“密钥”部分。
答：
1赞
Amanda
10/21/2023
#1
我重新组织了您的代码以用作功能组件。 正如其他人所评论的那样，您需要使用状态在更新时重新渲染组件。我删除了计数，因为 .map 允许索引。（如果您认为有必要，可以将其作为 TaskFunction 中的变量添加回去）
W3 School 的示例之所以有效，是因为它们没有更新状态。它们有一个预设了值的列表，并呈现这些值。
最后，您的地图函数需要“返回”元素。与 w3 学校的示例一样，map 返回 Car 组件。所以你所拥有的有点混淆。
希望这会有所帮助。
function App() {
const [tasks, setTasks] = React.useState([])
const generateValue=()=>{
let someValue = Math.random() *10
let newValue = {value: someValue}
setTasks([...tasks, newValue])
}
return (
<div>
<button onClick={()=>{generateValue()}}>Add New Item</button>
<h1>List</h1>
<ul>
{tasks.map((task, index)=>(<li key={index}>{task.value}</li>))}
</ul>
</div>
)
}
ReactDOM.createRoot(document.querySelector("#app")).render(<App />)<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>在评论中，您要求查看使用旧样式类组件的状态示例 -
class App extends React.Component {
state = {
tasks: []
}
generateValue = () => {
let someValue = Math.random() *10
let newValue = {value: someValue}
this.setState({ tasks: [ ...this.state.tasks, newValue ] })
}
render() {
return (
<div>
<button onClick={this.generateValue}>Add New Item</button>
<h1>List</h1>
<ul>
{this.state.tasks.map((task, index)=>(<li key={index}>{task.value}</li>))}
</ul>
</div>
)
}
}
ReactDOM.createRoot(document.querySelector("#app")).render(<App />)<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>没有公共类字段 -
class App extends React.Component {
constructor() {
super()
this.state = {
tasks: []
}
}
generateValue() {
let someValue = Math.random() *10
let newValue = {value: someValue}
this.setState({ tasks: [ ...this.state.tasks, newValue ] })
}
render() {
return (
<div>
<button onClick={this.generateValue.bind(this)}>Add New Item</button>
<h1>List</h1>
<ul>
{this.state.tasks.map((task, index)=>(<li key={index}>{task.value}</li>))}
</ul>
</div>
)
}
}
ReactDOM.createRoot(document.querySelector("#app")).render(<App />)<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>
评论
tasks