javascript - 使用对象值预填充文本输入 React

Question

我正在尝试使用对象中预先存在的数据预填充文本字段。我正在使用一个从 switch 语句构建的组件渲染器，如下所示(我将删除其他情况以使其更具可读性):

switch (data.type) {
    case 'text':
        return (
            <div
                key={data.index}
                data-name={selection}
            >
                <FieldLabel
                    htmlFor={data.name}
                    label={data.value}
                />
                <FormInput
                    type={data.type}
                    name={data.name}
                    placeholder={data.placeholder}
                    onChange={
                        e => props.onCommentsChange(
                            e,
                            data.structure,
                            data.rules
                        )}
                    value={selection}
                    err={props.error === 1
                        && props.validationErrors !== null
                        && data.name in props.validationErrors
                        ? 1
                        : 0
                    }
                />
            </div>
        )

}

输入的值是selection变量，其设置如下:

let selection;
const data = {
    type: props.type,
    options: props.options,
    name: props.name,
    value: props.value,
    structure: props.structure,
    rules: props.rules,
    index: props.index,
    placeholder: props.placeholder,
    order: props.order,
    date: props.date,
    onDateChange: props.onDateChange,
    onFocusChangeHandler: props.onFocusChangeHandler,
    focused: props.focused,
};
const section = Object.entries(data.structure)[0][0];

从此，我尝试使用 if 语句，该语句像这样循环并将 selection 变量设置为值:

if (props.usersCurrentSelection !== null && props.usersCurrentSelection !== undefined) {
    console.log(props.usersCurrentSelection.data);
    console.log(section);
    console.log(props.usersCurrentSelection.data[section]);
    if (section in props.usersCurrentSelection.data) {
        Object.keys(props.usersCurrentSelection.data[section]).forEach(
            item => {
                let value = props.usersCurrentSelection.data[section][item];
                console.log(value);
                selection = value;
            }
        );
    }
}

控制台日志返回以下内容:

正如您所看到的，它正在循环中查找与其键相关的值。由于文本组件将 selection 变量作为其值，我不确定为什么它没有填充？

感谢您的帮助。

Answer 1

这是一些伪代码，根据您最近的评论显示我可能会采取的方法:

const Input = props => {
  // your switch statement goes here
}


const SectionFields = props => {
  const { type, options, name, value, structure = {}, rules, index, placeholder, order, date, onDateChange, onFocusChangeHandler, focused } = props
  const usersCurrentSelection = props.usersCurrentSelection || { data: {} }
  const section = Object.keys(structure)[0]

  const data = { type, options, name, value, structure, rules, index, placeholder, order, date, onDateChange, onFocusChangeHandler, focused }

  const itemsInSection = Object.values(usersCurrentSelection)

  return itemsInSection.length > 0
    ? (
      <>
        itemsInSection.map(([key, val]) => (
            <Input data={data} item={val} />
        ))
      </>
    )
    : null
}


const Form = props => (
  <>
    <SectionFields /*{props.section1 here}*/ />
    <SectionFields /*{props.section2 here}*/ />
    <SectionFields /*{props.section3 here}*/ />
  </>
)

这对于您的需求来说可能过于简单，但它可能会为您指明正确的方向。确定整个完成的表单应该是什么样子以及底层数据是如何组织的仍然有点困难。