Question

所以我才刚刚开始学习Reactjs，我正在构建一个简单的应用程序来管理带有对象的简单列表。

所有对象都有一些共同的属性'a，b，c'，但有些具有'd'，有些具有'e，有些具有两者，如下所示：

this.state.list = [
    {
        a: 1,
        b: 2,
        c: 3
    },
    {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: 5
    },
    {
        a: 1,
        b: 2,
        c: 3,
        d: 4
    },
    {
        a: 1,
        b: 2,
        c: 3,
        e: 5
    },
]

我有绑定到每个不同属性的输入，这些属性将根据所选项目而动态变化：

<input value={this.state.list[selectedIndex].a} />
<input value={this.state.list[selectedIndex].b} />
<input value={this.state.list[selectedIndex].c} />
<input value={this.state.list[selectedIndex].d} />
<input value={this.state.list[selectedIndex].e} />

问题是，当我更改所选项目时，输入未考虑缺少的属性（因为它们是未定义的）。

我可以简单地使用条件检查未定义的属性，而不打印输入，但是只要各个输入填充在没有对象的对象上，我就希望能够向对象添加“ d”和“ e”他们。

处理此问题的最佳方法是什么？是可行的，还是应该仅将所有对象标准化为具有所有属性，即使它们为空？是否有“正确”的方法来完成此任务（将来不会给我带来麻烦）？

Answer 1

您可以尝试这样的事情

(selectedIndex) => {
  const {
    a='',
    b='',
    c='',
    d='',
    e=''
  } = this.state.list[selectedIndex];

  return (
    <input value={a} />
    <input value={b} />
    <input value={c} />
    <input value={d} />
    <input value={e} />
  )
}

这被称为object destructuring，具有默认值。

Answer 2

您是否尝试过在渲染函数中放入以下内容：

  {
    Object.keys(this.state.list[selectedIndex]).map(input=>(
      <input value={this.state.list[selectedIndex][input]} />
    ))
  }

在Reactjs中处理受控字段中的未定义属性

2 个答案: