reactjs - Formio React Edit 功能不带变量或状态

Question

我正在使用 React 创建一个自定义 Formio 应用程序，并且我正在尝试创建一个组件，我们可以使用它来打开以前创建的表单进行编辑。我使用 Formio 中的组件，然后尝试拉出组件并将它们传递给 components 属性，但它一直告诉我它是未定义的。但是，如果我对它进行字符串化，甚至使用变量导入它或将确切的字符串粘贴进去，它就可以工作，但是如果我尝试将它传递给变量或状态，它将无法工作。以下是我的代码，非常感谢任何帮助。我觉得我什么都试过了。

import { FormEdit, FormBuilder } from "react-formio";
import axios from "axios";
import AppLayout from "../pages/layout/appLayout";
import { Typography } from "@material-ui/core/";
import { Link } from "react-router-dom";
import { components } from "../formData";

export default class FormUpdate extends React.Component {
  state = {
    formName: "",
    formTitle: "",
    isFormSubmitted: false,
    formComponents: {},
    errorMsg: "",
  };

  componentDidMount() {
    console.log("Id", this.props.formData);
    axios
      .get(
        `https://awsid.execute-api.us-east-1.amazonaws.com/prod/form?formName=${this.props.formData.id}`,
        { crossDomain: true },
        {
          headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET,POST,OPTIONS",
          },
        }
      )
      .then((res) => {
        console.log(res.data.form.components);
        this.setState({
          formComponents: res.data.form.components[0],
        });
      })
      .catch((error) => {
        console.log(error);
        this.setState({ errorMsg: "Error retrieving form data." });
      });
  }

  updateForm = (form) => {
    const payload = {
      form,
    };

    console.log("Form Data:", form);

    /* Code to fix JSON of select boxes component. If no default value is selected, default value attribute is deleted  */
    for (var key in payload.form.components) {
      if (
        form.components[key].defaultValue === "" ||
        form.components[key].defaultValue === null ||
        // form.components[key].defaultValue === false ||
        form.components[key].defaultValue.hasOwnProperty("")
      ) {
        console.log(
          form.components[key].defaultValue + " is blank. Deleting attribute."
        );
        delete form.components[key].defaultValue;
      }
      console.log(form.components[key].defaultValue);
    }

    return axios
      .put(
        `https://awsid.execute-api.us-east-1.amazonaws.com/prod/form`,
        payload,
        { crossdomain: true },
        {
          headers: {
            "Content-type": "application/json",
          },
        }
      )
      .then((response) => {
        console.log("Uploaded", response.data);

        this.setState({
          formName: response.data.id,
          formTitle: response.data.title,
          isFormSubmitted: true,
        });
      })
      .catch((error) => {
        console.log("Did not post: " + error);
      });
  };

  handleFormNameChange = (evt) => {
    const value = evt.target.value;

    this.setState({
      ...this.state,
      formName: value,
    });
  };

  handleFormNameClick = async () => {
    await this.setState({
      formNameForm: false,
    });

    this.retrieveData(this.state.formName);
    // console.log(this.state.formName);
  };

  listComponents = () => {
    this.state.formComponents.map((item) => {
      console.log(item);
      // this.setState({ formComponents: item });
      return item;
    });
  };

  components = JSON.stringify(this.state.formComponents).replace(
    /^\[(.+)\]$/,
    "$1"
  );

  render() {
    // const components = JSON.stringify(this.state.formComponents).replace(
    //   /^\[(.+)\]$/,
    //   "$1"
    // );
    // const allComponents = this.state.formComponents[0];
    console.log(
      JSON.stringify(this.state.formComponents).replace(/^\[(.+)\]$/, "$1")
    );
    console.log(this.state.formComponents);
    console.log(components);

    return (
      <AppLayout>
        <div className="container">
          <link rel="stylesheet" href="styles.css" />

          <link
            rel="stylesheet"
            href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Bangers&display=swap"
            rel="stylesheet"
          ></link>

          <main className="formEditContainer">
            {this.state.isFormSubmitted === true ? (
              <div className="fadePanel">
                <Typography variant="h4" align="center">
                  Form Completed
                </Typography>
                <br />
                <Typography variant="body1" align="center">
                  &nbsp;
                  <b>
                    <i> To view form visit:</i>
                  </b>{" "}
                  &nbsp;&nbsp;
                  <Link
                    to={`/openform/${this.state.formName}`}
                    className="links"
                  >
                    <small>{this.state.formTitle}</small>
                  </Link>
                </Typography>
              </div>
            ) : (
              <div>
                <Typography>
                  Form Name: &nbsp;&nbsp;
                  {this.props.formData.id}
                </Typography>
                <br />

                <FormEdit
                  form={{
                    display: "form",
                    title: this.props.formData.id,
                    name: this.props.formData.id,
                    path: this.props.formData.id,
                    components: [components],
                  }}
                  saveText={"Save Form"}
                  saveForm={(form) => this.updateForm(form)}
                >
                  <FormBuilder
                    form={{
                      display: "form",
                      title: this.props.formData.id,
                    }}
                    Builder={{}}
                    onUpdateComponent={{}}
                  />
                </FormEdit>
              </div>
            )}

            <br />
            <br />
          </main>
        </div>
      </AppLayout>
    );
  }
}

标签： reactjsformio