有没有办法在 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}) {&nbsp; const [open1, setOpen1] = useState(true);&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; className="questionrectangle "&nbsp; &nbsp; &nbsp; &nbsp; onClick={() => setOpen1(!open1)}&nbsp; &nbsp; &nbsp; &nbsp; name="step-one"&nbsp; &nbsp; &nbsp; &nbsp; aria-controls="example-collapse-text"&nbsp; &nbsp; &nbsp; &nbsp; aria-expanded={open1}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <p className="questiontext "> {post.QString}</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; {open1 && (&nbsp; &nbsp; &nbsp; &nbsp; <div name="step-two">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p className="questionanswer">{post.Answer}</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; </>&nbsp; );}现在，从您的主应用程序中获取数据并为每个帖子创建一个组件 - 就像这样&nbsp; // Replace this with fetch request&nbsp; const data = [&nbsp; &nbsp; { QString: "Question 1", Answer: "answer 1" },&nbsp; &nbsp; { QString: "Question 2", Answer: "answer 2" },&nbsp; &nbsp; { QString: "Question 3", Answer: "answer 3" }&nbsp; ];&nbsp; return (&nbsp; &nbsp; <Container fluid={true} className="text-center">&nbsp; &nbsp; &nbsp; {data.map((post) => (&nbsp; &nbsp; &nbsp; &nbsp; <QuestionAnswer post={post} />&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </Container>&nbsp; );}现在，每个组件将保存自己的“打开”状态副本，并且能够处理单独的打开和关闭状态。您可以查看完整的示例https://codesandbox.io/s/beautiful-surf-ejron

Answer 2

思考这个问题的技巧是，每个子元素（您的 <Containers /> 列表）不应该负责了解它们的兄弟元素，或者如何负责任地管理它们之间的打开状态而不引起冲突。这种责任应该更高一个层次，能够看到所有的孩子并为他们管理。应该很容易采用该手风琴示例供您自己使用。const DocsManager = () => {&nbsp; // Manage which step is open here, at a higher level&nbsp; const [openIndex, setOpenIndex] = useState(0); // or whatever the default should be&nbsp; // Records could live here, or be passed in as props&nbsp; const [docs, setDocs] = useState([]);&nbsp; useEffect(() => {&nbsp; &nbsp; getDocs.then(setDocs);&nbsp; }, [])&nbsp; return docs.map((doc, i) =>&nbsp; &nbsp; <YourComponent&nbsp; &nbsp; &nbsp; isOpen={openIndex === i}&nbsp; &nbsp; &nbsp; // Or maybe&nbsp; &nbsp; &nbsp; open={() => setOpenIndex(i)}&nbsp; &nbsp; &nbsp; // Or maybe&nbsp; &nbsp; &nbsp; close={() => setOpenIndex(null)}&nbsp; &nbsp; &nbsp; // Or maybe&nbsp; &nbsp; &nbsp; next={() => setOpenIndex(openIndex + 1)}&nbsp; &nbsp; &nbsp; doc={doc}&nbsp; &nbsp; />&nbsp; );};