javascript 如何使用setState通过JSX传递数组？

u4dcyp6a 于 2023-04-04 发布在 Java

关注(0)|答案(1)|浏览(125)

我正在使用QuillForms创建一个表单页面，该页面具有“formObj”属性，该属性接受JSON对象列表以正确呈现表单。
我想通过一个组件传递一个JSON对象的列表。本质上，我将创建一个JSON对象的列表，该列表将被传递给我的return（）jsx中的一个组件。
我在我的Home.jsx中使用了一个名为getQuestions（）的函数，它执行以下操作：

const getQuestions = () => {

  
    const questions = [...Array(parseInt(numQuestions)).keys()]

    let questionPairs = []
  
    questions.forEach((item, index) => {
      questionPairs.push({
        name: "short-text",
        id: String.valueOf(item),
        attributes: {
          classnames: "example",
          nextBtnLabel: "Next",
          required: true,
          label: "What would you like to suggest?"
        }
      })
    })

    return questionPairs;
  }

其中numQuestions是任意整数。然而，我尝试在函数内部实现一个setState变量，类似于post。
我还尝试使用React的useEffect钩子来尝试在页面加载时获取问题。每次我尝试在函数体内使用useState（）时，它都会给我一个错误，说太多的重新呈现。

<Form
        formId="2"
        formObj={{
          blocks: getQuestions(),
          settings: {
            animationDirection: "vertical",
            disableWheelSwiping: false,
            disableNavigationArrows: false,
            disableProgressBar: false
          },
          theme: {
            font: "Roboto",
            buttonsBgColor: "#9b51e0",
            logo: {
              src: ""
            },
            questionsColor: "#000",
            answersColor: "#0aa7c2",
            buttonsFontColor: "#fff",
            buttonsBorderRadius: 25,
            errorsFontColor: "#fff",
            errorsBgColor: "#f00",
            progressBarFillColor: "#000",
            progressBarBgColor: "#ccc"
          }
        }}
/>

我想将getQuestions（）函数返回的数组传递到属性块中，但表单没有呈现。我怀疑函数没有正确传递值有问题，因为当我试图使用console.log（）调试它并打印出函数体内的函数值时，返回了完整的列表。

仅供熟悉QuillForms的人士参考 *：如何动态地向block属性添加更多问题，而不必在每次渲染时调用函数？

任何帮助都将不胜感激！谢谢！

JavaScript

来源：https://stackoverflow.com/questions/75910000/how-can-i-pass-an-array-through-jsx-using-setstate

1条答案

按热度按时间

aurhwmvo1#

在getQuestions（）函数中使用useState（）时，您似乎遇到了触发过多重新呈现的问题。此问题的一个解决方案是将useState（）调用移动到函数外部，并将状态作为prop传递给包含Form组件的组件。然后，您可以使用useEffect（）在numQuestions变量更改时更新状态。
下面是一个示例，说明如何修改代码以实现此目的：

import { useState, useEffect } from "react";

function Home() {
  const [questions, setQuestions] = useState([]);

  useEffect(() => {
    const questionPairs = [];
  
    for (let i = 0; i < numQuestions; i++) {
      questionPairs.push({
        name: "short-text",
        id: String(i),
        attributes: {
          classnames: "example",
          nextBtnLabel: "Next",
          required: true,
          label: "What would you like to suggest?"
        }
      });
    }
  
    setQuestions(questionPairs);
  }, [numQuestions]);

  return (
    <Form
      formId="2"
      formObj={{
        blocks: questions,
        settings: {
          animationDirection: "vertical",
          disableWheelSwiping: false,
          disableNavigationArrows: false,
          disableProgressBar: false
        },
        theme: {
          font: "Roboto",
          buttonsBgColor: "#9b51e0",
          logo: {
            src: ""
          },
          questionsColor: "#000",
          answersColor: "#0aa7c2",
          buttonsFontColor: "#fff",
          buttonsBorderRadius: 25,
          errorsFontColor: "#fff",
          errorsBgColor: "#f00",
          progressBarFillColor: "#000",
          progressBarBgColor: "#ccc"
        }
      }}
    />
  );
}

在这个修改后的代码中，我们首先声明一个状态变量questions，并使用useState（）将其初始化为一个空数组。然后，我们使用useEffect（）生成问题对，并在numQuestions发生变化时更新状态。最后，我们将questions状态变量作为prop传递给Form组件。
要动态添加更多问题，您可以创建一个单独的函数，将新问题对添加到问题状态变量，并在事件触发器（如按钮单击）上调用它。这将触发重新呈现并使用新问题更新Form组件。

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 如何使用setState通过JSX传递数组？

1条答案

相关问题

热门标签

最新问答