Question

我正在尝试根据状态下的数据生成一个：

const { id } = this.props.match.params;
const formGen = this.state.arr.map(arr => {
  if (id == arr.id) {
    const inner = this.state.arr.input.map(inputs => (
      <div>
        <h1>{arr.name}</h1>
        <label>{inputs.inputLabel}</label>
        <input value={inputs.inputValue} type={inputs.inputType} />
      </div>
    ));
  }
});

现在，我不知道如何在渲染选项卡中显示它，因为我在变量中有一个变量：

<form />
        {formGen.inner}
      </div>

这是我要映射的状态

 arr: [
      {
        id: 1,
        name: 'firstForm',
        input: [
          {
            inputLabel: 'wowLabel',
            inputType: 'wowType',
            inputValue: 'wowValue'
          },
          {
            inputLabel: 'wowLabel2',
            inputType: 'wowType2',
            inputValue: 'wowValue2'
          }
        ]
      }

Answer 1

您可以返回响应，而不是将响应存储在变量中，否则返回undefined然后过滤掉响应。

const { id } = this.props.match.params;
const formGen = this.state.arr.map(arr => {
  if (id == arr.id) {
    return this.state.arr.input.map(inputs => (
      <div>
        <h1>{arr.name}</h1>
        <label>{inputs.inputLabel}</label>
        <input value={inputs.inputValue} type={inputs.inputType} />
      </div>
    ));
  }
  return;
}).filter(Boolean);

在此之后，您可以将其渲染为

 <form />
    {formGen}
  </div>

Answer 2

const { id } = this.props.match.params;

// replace the first map with a find
const arr = this.state.arr.find(a => a.id == id);

// if arr is defined
if(arr){
    const inner = arr.input.map(inputs => (
      <div>
        <h1>{arr.name}</h1>
        <label>{inputs.inputLabel}</label>
        <input value={inputs.inputValue} type={inputs.inputType} />
      </div>
    ));

} else {
  // indicate to the user the that id was not found and what to do to fix the problem
}

<form>{inner}</form>

如何在表单中正确显示值？

2 个答案: