当我尝试打印无序列表中的所有数组项时，React 中的 Array.map() 出现问题

Question

这是代码：

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} />)}

您还可以在这里查看他们的计划： 检查“按键”部分。

Answer 1

我重新组织了你的代码，使其作为功能组件工作。 正如其他人评论的那样，您需要使用状态在更新时重新渲染组件。我删除了 count，因为 .map 允许索引。（如果您认为有必要，可以将其作为 TaskFunction 中的变量添加回来）

W3 School 的示例之所以有效，是因为他们没有更新状态。他们有一个预先设置值的列表并渲染这些值。

最后，您的地图函数需要“返回”元素。正如 w3 学校的示例一样，map 返回 Car 组件。所以你所拥有的有点混乱。

希望这有帮助。

function TaskFunction () {
 const [tasks, setTasks] = useState([])

 const generateValue=()=>{
  let someValue = Math.random() *10
  let newValue = {value: someValue}

  setTasks([...tasks, newValue])
 }

 return (
   <>
    <button onClick={()=>{generateValue()}}>Add New Item</button>
    <h1>List</h1>
    <ul>
      {tasks.map((task, index)=>(<li key={index}>{task.value}</li>))}
    </ul>
   </>
 )
}

Answer 2

使用地图时，需要指定一个key

<ul>
{ tasks.map(task => <li key = {msg.id}>{msg.value}</li>)}
</ul>