如何使用 useState 仅更新单击的元素？

Question

我有一个包含步骤列表的章节列表。我试图在单击按钮时向章节添加步骤，但目前我正在向所有章节添加步骤。 我做错了什么？

  const dummy_chapters = [
    { id: 1, title: 'Chapter 1'},
    { id: 2, title: 'Chapter 2'},
    { id: 2, title: 'Chapter 3'},
  ]

const dummy_steps = [
    { id: 1, title: 'Step 1'},
    { id: 2, title: 'Step 2'},
  ]

  const [chapters, setChapters] = React.useState(dummy_chapters)
  const [steps, setSteps] = React.useState(dummy_steps)

  const addStep = () => {
    setSteps([
      ...steps,
      {
        id: 5,
        title: 'Another step'
      },
    ])
  }

  return (
      <List>
          {chapters.map((d, idx) => (
              <ChapterListItem    
                  secondaryAction={
                    <IconButton onClick={addStep}>
                      <MoreVertIcon/>
                    </IconButton>
                  }>
                  </ChapterListItem>
                <List component='div' disablePadding>
                  {steps?.map((d, idx) => (
                    <ListItemText primary={d.title}/>
                  ))} 
                </List> 
          ))}
      </List>
          <Icon onClick={addChapter} iconId='add' />
      </Box>
    </>
  )
}

Answer 1

您可以在每个章节内添加steps键，而不是以不同的方式管理章节和步骤。然后，要添加新步骤，您可以尝试如下所述的方法。

    const dummy_chapters = [{
        id: 1,
        title: 'Chapter 1',
        steps: [{
            id: 1,
            title: 'Step 1'
          },
          {
            id: 2,
            title: 'Step 2'
          },
        ]
      },
      {
        id: 2,
        title: 'Chapter 2',
        steps: []
      },
      {
        id: 2,
        title: 'Chapter 3',
        steps: []
      },
    ]

    const dummy_steps = [
        { id: 1, title: 'Another Chapter'},
      ]

     const [chapters, setChapters] = React.useState(dummy_chapters)

      const addStep = (chapterId) => {
        const updatedChapters = chapters?.map((chapter) => {
          if(chapter?.id === chapterId){
            chapter[steps] = [...chapter.steps, ...dummy_steps]
          }
          return chapter
        })
        setChapters(updatedChapters)
      }

      return (
          <List>
              {chapters.map((chapter, idx) => (
                  <ChapterListItem    
                      secondaryAction={
                        <IconButton onClick={() =>addStep(chapter?.id)}>
                          <MoreVertIcon/>
                        </IconButton>
                      }>
                      </ChapterListItem>
                    <List component='div' disablePadding>
                      {chapter?.steps?.map((step, idx) => (
                        <ListItemText primary={step.title}/>
                      ))} 
                    </List> 
              ))}
          </List>
              <Icon onClick={addChapter} iconId='add' />
          </Box>
        </>
      )
    }

Answer 2

尝试在步骤对象中添加一个字段（例如 chapterId: 1），然后在递增之前添加一个条件以在递增之前检查章节 ID。
这样您就可以增加所需章节的步骤。