Question

我正在使用React Hook构建笔记应用程序。我使用1个钩子来保存2个输入中的数据：

const saveNotes = (title, content) => {
const trimmedTitle = title.trim(),
  trimmedContent = content.trim();

setNotes([
  ...notes,
  {
    title: trimmedTitle,
    content: trimmedContent
  }
])};

然后我要映射这样的注释：

 {notes.map((note, index) => (
    <StyledListElement key={index}>
      <Card style={{ margin: "20px", width: "100%" }} variant="outlined">
        <CardContent>
          <Typography variant="h4">{note.title}</Typography>
          <StyledContent>{note.content}</StyledContent>
          <Button
            variant="contained"
            style={{ marginTop: "20px" }}
            color="secondary"
            onClick={deleteNote}
          >
            Delete note
          </Button>
        </CardContent>
      </Card>

之后，我得到一个错误，提示notes.map不是一个函数。我该如何解决？

Answer 1

在上面的示例中，未使用notes钩子声明useState。即使存在，请确保在调用map方法之前正确初始化该值。

import { useState } from 'react';

const [notes, setNodes] = useState([]); // Initialize as an array

Answer 2

notes.map && notes.map((note, index)

这应该有效

使用React钩子时Map不是函数

2 个答案: