有没有办法在 React 中创建动态状态和 setState

Question

我有以下减速：   const [open1, setOpen1] = useState(false);并希望生成与从数据库中获取记录一样多的记录（对于获取的每条记录）我需要 new [open, setopen]这是我的代码中使用的 for 循环。        <Container fluid={true} className="text-center">          <div            className="questionrectangle "            onClick={() => setOpen1(!open1)}            name="step-one"            aria-controls="example-collapse-text"            aria-expanded={open1}>            <p className="questiontext "> {post.QString}</p>          </div>          <Collapse in={open1} name="step-two">            <p className="questionanswer">{post.Answer}</p>          </Collapse>        </Container> ```If you have any idea I would be appreciated 

Answer 1

创建单独的组件来保持“打开”状态。像这样的东西..

function QuestionAnswer({post}) {

  const [open1, setOpen1] = useState(true);

  return (

    <>

      <div

        className="questionrectangle "

        onClick={() => setOpen1(!open1)}

        name="step-one"

        aria-controls="example-collapse-text"

        aria-expanded={open1}

      >

        <p className="questiontext "> {post.QString}</p>

      </div>

      {open1 && (

        <div name="step-two">

          <p className="questionanswer">{post.Answer}</p>

        </div>

      )}

    </>

  );

}

现在，从您的主应用程序中获取数据并为每个帖子创建一个组件 - 就像这样

  // Replace this with fetch request

  const data = [

    { QString: "Question 1", Answer: "answer 1" },

    { QString: "Question 2", Answer: "answer 2" },

    { QString: "Question 3", Answer: "answer 3" }

  ];

  return (

    <Container fluid={true} className="text-center">

      {data.map((post) => (

        <QuestionAnswer post={post} />

      ))}

    </Container>

  );

}

现在，每个组件将保存自己的“打开”状态副本，并且能够处理单独的打开和关闭状态。

您可以查看完整的示例

https://codesandbox.io/s/beautiful-surf-ejron

Answer 2

思考这个问题的技巧是，每个子元素（您的 <Containers /> 列表）不应该负责了解它们的兄弟元素，或者如何负责任地管理它们之间的打开状态而不引起冲突。这种责任应该更高一个层次，能够看到所有的孩子并为他们管理。

应该很容易采用该手风琴示例供您自己使用。

const DocsManager = () => {

  // Manage which step is open here, at a higher level

  const [openIndex, setOpenIndex] = useState(0); // or whatever the default should be

  // Records could live here, or be passed in as props

  const [docs, setDocs] = useState([]);

  useEffect(() => {

    getDocs.then(setDocs);

  }, [])

  return docs.map((doc, i) =>

    <YourComponent

      isOpen={openIndex === i}

      // Or maybe

      open={() => setOpenIndex(i)}

      // Or maybe

      close={() => setOpenIndex(null)}

      // Or maybe

      next={() => setOpenIndex(openIndex + 1)}

      doc={doc}

    />

  );

};