reactjs - 如何使用 React 为映射函数中的各个元素设置状态？

Question

我有一系列问题，我正在映射并在 UI 中显示它们，大约有 70 多个问题。

每个问题都有一个 '+' 按钮，单击它会显示答案，我想使用状态显示答案，但仅针对单击的特定问题，而不是整个列表。目前我有它，所以当点击一个按钮时，它会显示所有 70 多个答案，执行此操作的最佳方法是什么，所以它只显示一个？

这是我的代码:

  const [open, setOpen] = useState(false);


 <div className='md:mt-8 pb-20'>
            {results[0].data.glossary_boxes.map((item, i) => (
              <>
                <div
                  key={i}
                  className='w-full border-3 border-yellow-500 flex-grow p-2 md:p-2 my-8'>
                  <div className='flex h-full items-center'>
                    <div className='bg-yellow-500 px-3 py-1 flex items-center justify-start ml-2'>
                      <a
                        onClick={() => setOpen(!open)}
                        className='text-white text-3xl cursor-pointer'>
                        {open ? '-' : '+'}
                      </a>
                    </div>
                    <div className='flex flex-col items-start'>
                      <p className='text-gray-500 font-sansbold text-md md:text-xl px-12'>
                        {item.question}
                      </p>

                      <p
                        className={`text-xl gray-500 font-quote text-md md:text-lg px-12 ${
                          open ? 'block' : 'hidden'
                        }`}>
                        {item.answer}
                      </p>
                    </div>
                  </div>
                </div>
              </>
            ))}
          </div>

当状态为真时，它还会在 '+' 所在位置显示一个 '-'，直到再次单击以设置为 false(隐藏答案).

提前致谢!

Answer 1

在那种情况下，您需要处理每个问题的打开/关闭触发器。 所以你需要在对象中有一个额外的变量来对应一个问题是否打开(默认情况下它是假的)，这样你就可以处理每个问题本身而不是一个可以判断是否打开的打开状态或全部关闭。 此外，我建议为单个问题创建一个组件，该组件将在您将为组件的每个项目呈现的 map 函数中接收 Prop (isOpen、answer、question 等)。
例如:
<SingleQuestion question={item.question} answer={item.answer} isOpen={item.isOpen}>
你可以让组件本身(SingleComponent)处理决定 isOpen 为真或假的内部状态，这样每个问题都会保持一个状态，可以显示/隐藏相关问题的答案。
希望你明白了，如果没有，我会在需要时尝试解释更多。