使用對象值 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}*/ />
  </>
)

這對於您的需求來說可能過於簡單化，但它可能會為您指明正確的方向。 確定整個完成的表單應該是什么樣子以及底層數據的組織方式仍然有點困難。