React：如何构建显示数据库中用户数据的动态输入字段

Question

我有来自我的数据库的动态输入字段。 生成输入字段不是问题。 然而，一旦用户输入信息，他们可能想要返回并更改输入。 我在使用编辑组件时遇到问题。 似乎如果我在 value 属性中放置任何内容，该字段中的文本将不会改变。 为清楚起见，假设我有 5 个输入，但用户只填写 2 个。我希望他们的数据显示在正确的输入中。 这就是我在做什么。

  useEffect(() => {
    fetchPlatformInputs();
  }, []);

const fetchPlatformInputs = async () => {

  const fetchInputs = async () => {
    const fetchedInputs = await API.graphql({
      query: sortInputsByType,
      variables: { type: "*", sortDirection: "ASC" },
    });

  const { items } = fetchedInputs.data.sortInputsByType;  <--- the input fields

// Then the user's input for each field is held in context (which is derived from the user table) so I loop over both object arrays to create one object array of dynamic inputs with user data.

contextUser.inputData.map((contextData) => {
      for(const item of items) {
        if (contextData.inputType === item.inputType) {
         item.inputData = contextData.inputData;
        }
      }
    });

// Now I have an object array that joined the dynamic inputs and user data and I set put that into state.  

setPlatformInputs(items);

};

/// that is just a useState combo.  I loop over this variable to create the dynamic inputs.

  const [platformInputs, setPlatformInputs] = useState([]);

//. Okay now for the part I can't figure out.

// here is where I hold the form data:

const [formValues, setFormValues] = useState([]);

// the onchange handler builds an object array for database insertion.

  let handleChange = (e, inputType, inputData, isFabIcon, iconColor, imagePath) => {
    
    setFormValues({
      ...formValues,
      [inputType]: {
        inputType: inputType,
        inputData: inputData,
        isFabIcon: isFabIcon,
        iconColor: iconColor,
        imagePath: imagePath,
      },
    });


    console.log("form values are ", formValues);
  };

//. here are the dynamic fields

 {platformInputs?.length > 0 &&
          platformInputs.map((input, index) => (
            <MDBRow
              className="mx-auto my-2 text-center"
              key={"r" + index + "_" + input.inputType}
            >
              <MDBCol sm="2" key={"c1_" + input.inputType}>
                // image or icon goes here
              </MDBCol>
              <MDBCol sm="10" key={"c2_" + input.inputType}>
                <MDBInput
                  name={["input_" + input.inputType]}
                  label={[capitalizeWords(input.inputType)]}
                  type="text"
                  value={input.inputData}.  <-- here is the problem.  I can't figure out how to display the initial incoming user data and update it with the state formValues variable derived from the onChange handler
                  onChange={(e) =>
                    handleChange(
                      e,
                      input.inputType,
                      input.inputData,
                      input.isFabIcon,
                      input.iconColor,
                      input.imagePath
                    )
                  }
                />
              </MDBCol>
            </MDBRow>
          ))}

所以这个收集数据并完美显示。 唯一的问题是 state 不工作，因此用户无法编辑该字段。 无论用户键入什么，输入值都保持不变。

请注意，用户不必在每个输入字段中输入数据。 所以 formValues 变量只保存他们使用的那些。 否则我可能只是循环遍历 formValues 数组。 ' 感谢您的帮助。

Answer 1

基本示例

import React, { useState, useEffect } from 'react';

const DynamicInputFields = () => {
  const [userData, setUserData] = useState([]);
  const [inputFields, setInputFields] = useState([]);

  useEffect(() => {
    // fetch user data from database
    const fetchUserData = async () => {
      const response = await fetch('your-api-endpoint');
      const data = await response.json();
      setUserData(data);
    };
    fetchUserData();
  }, []);

  useEffect(() => {
    setInputFields(userData.map((item, index) => (
      <div key={index}>
        <input
          type="text"
          value={item.value}
          onChange={(e) => handleInputChange(e, index)}
        />
      </div>
    )));
  }, [userData]);

  const handleInputChange = (e, index) => {
    const updatedData = [...userData];
    updatedData[index].value = e.target.value;
    setUserData(updatedData);
  };

  return (
    <form>
      {inputFields}
      <button type="submit">Submit</button>
    </form>
  );
};

export default DynamicInputFields;