来自 JSON 的 React Dynamic 中的状态管理答案

【问题标题】：State management in React Dynamic from JSON来自 JSON 的 React Dynamic 中的状态管理
【发布时间】：2021-03-11 07:14:57
【问题描述】：

我有一个以这种方式模板化的动态表单：

class betClient extends Component(
  state = {
    .............
  }
  ................

  const ServerConfigDetails = this.state.ServerConfigDetail.map(field => {

    let SecretFields = "access_token" || "api_token" || "private_token" || "password" || "security_token" || "client_secret" || "refresh_token" || "oauth_client_id" || "oauth_client_secret" || "developer_token"
    if (field.name === SecretFields) {
      return <SecretInput inputlabel = {
        field.name == SecretFields ? field.name : null
      }
      placeholder = {
        field.placeholder
      }
      />
    }
    if (field.name === "start_date") {
      return <SelectDateInput inputlabel = "Start Date" / >
    }
    if (field.name === "end_date") {
      return <SelectDateInput inputlabel = "End Date" / >
    }


    // Here we template all other fields that aren't date or secret field
    if (field.name !== SecretFields) {
      return <TextInputs inputlabel = {
        field.label == null ? field.name : field.label
      }
      placeholder = {
        field.placeholder
      }
      />
    }
  })
  render() {
    return (
          <div>
           <Modal>
             <form> 
              {ServerConfigDetails}
            </form>
           </Modal>
         </div>
     )
  }
)

一切正常，表单是动态呈现的，但我不知如何让表单输入最好作为一个对象进入状态，而不必在初始状态下单独声明每个字段。有什么帮助吗？

不确定这是否足够清楚，但我很乐意提供任何额外信息。

【问题讨论】：

这能回答你的问题吗？ Get form data in ReactJS
@RandyCasburn，不，不完全是，我知道这个选项，但在我们的案例中很难管理。想知道是否可以在不手动创建以每个字段为键的状态对象的情况下获取表单数据 - 总共 64 个可能的字段可以随机匹配以创建单独的表单。
FormData 是你的朋友。其中一些可能也有帮助：stackoverflow.com/questions/42316604/… -- stackoverflow.com/questions/42387559/… --

标签： javascript reactjs object react-state-management

【解决方案1】：

我首先建议，我们应该决定我们的状态可能是什么样子 -

{
selects: {
 // With individual keys with default values
},
dynamic: {} // no key-value pairs at first
}

然后让您的所有组件 - 受控 - 您通过传递 value prop（并最终传递给您的本机输入）来控制要设置的内容


const { selects, dynamic } = this.state;

// pass a value prop as selects.<key-name> or empty string

最后为您的选择和动态输入字段组件添加 onChange 处理程序。（最后传递给您的本机输入）

onChangeSelectField (event, fieldName) {}
//Same for InputField

这些处理程序将处理状态，如果事件目标中的值不存在，则添加键；如果输入了新值，则添加替换（覆盖）当前键值。

{
    const currentDynamicData = this.state.dynamic;
    const newData = { ... currentDynamicData, {... updatedData}}; // updatedData is newer key-value pair

this.setState({ dynamic: newData });
}

这是一种解决方法。

【讨论】：