javascript - 在数组内的对象中提取数组

Question

大家好，我正在尝试从中提取数据:

1) […]
​
0: {…}
​​
__v: 0
​​
_id: "5ba96b8ebffd923734090df4"
​​
formID: "5ba96b83bffd923734090df0"
​​
inputArr: Array(3) [ "value1", "value2", "value3" ]
​​
labelArr: Array(3) [ "label1", "label2", "label3" ]
​​
<prototype>: Object { … }
​
length: 1
​
<prototype>: Array []

我需要获取数据内部的数组，即this.state.inputData(上面看到的是内容)，

我试过了

const labels = inputDataArr[0].labelArr.map((r, index) => {
      return (
        <tr key={index}>
          <th>{index}</th>
          <th>{r[index]}</th>
        </tr>
      );

但是我的项目未定义，有人知道为什么吗？

编辑:其他渲染问题:

renderData(i) {
    const { inputDataArr } = this.state;
    return (
      !!inputDataArr.length &&
      inputDataArr[i].inputArr.map((input, index) => (
        <th key={index}>{input}</th>
      ))
    );
  }
  countLength() {
    const { inputDataArr } = this.state;
    return !!inputDataArr.length && inputDataArr[0].inputArr.length;
  }
  runThrough() {
    for (let i = 0; i < this.countLength; i++) return this.renderData(i);
  }
  render() {
    const data = this.runThrough();
    return (
      <div className="app">
        <table>
          <tr>{this.renderLabels()}</tr>
          {data}
        </table>
      </div>
    );
  }
}

Answer 1

给出与您的其他问题相同的示例。不太确定这是否适合您，也许您需要改变并考虑一下。

class App extends React.Component {
  state = {
    inputDataArr: [
      {
        formID: "3",
        inputArr: [ "value1", "value2" ],
        labelArr: [ "label1", "label2" ],
      },
      {
        formID: "3",
        inputArr: [ "value3", "value4" ],
        labelArr: [ "label3", "label4" ],
      },
    ],
  }


  renderLabels() {
    const { inputDataArr } = this.state;
    return !!inputDataArr.length && inputDataArr[ 0 ].labelArr.map( ( label, index ) =>
      ( <tr key={label}>
        <th>{index}</th>
        <th>{label}</th>
        </tr> ) );
  }

  render() {
    return (
      <div>
        <table>
          {this.renderLabels()}
        </table>
      </div>
    );
  }
}

ReactDOM.render( <App />, document.getElementById( "root" ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

评论后更新

得知您是通过异步操作获取数据后，我在 renderLabels 方法中添加了一个小条件。现在它会查找数组的长度是否返回true:

return !!inputDataArr.length && inputDataArr[ 0 ]

这是逻辑运算符和 React 渲染逻辑的混合。为什么我使用 !!inputDataArr.length 而不是 inputDataArr.length？

通常，在逻辑运算符中，如果第一个条件为 0，则不会通过第二部分。

const num = 0;

num && console.log( "passed the second part" );

如您所见，它永远不会通过第二部分。这是因为 0 在这里表示 false。

如果值为 undefined 或 false 或 null，React 会忽略渲染。但如果值为 0 就会呈现:)

让我们看看:

class App extends React.Component {
  state = {
    num: 0,
  };


  render() {
    return (
      <div>
        {this.state.num && <p>Render me</p>}
      </div>
    );
  }
}

ReactDOM.render( <App />, document.getElementById( "root" ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

这和你的情况很相似。在第一个渲染数组中，数组的长度为0。所以，如果我们使用这个:

return inputDataArr.length && inputDataArr[ 0 ]

它呈现一个0。我们在这里想要的是忽略渲染。因此，如果我们使用逻辑 NOT 运算符两次，我们会得到一个 false ，并且 React 会忽略渲染。为什么我们得到false？

由于 0 表示 false，!!false 再次评估为 false。然后，React 会忽略渲染，并且我们不会出现您在问题中提供的错误。

当数据到达您的应用程序时，在第二次渲染中，这次数组的长度大于 0，假设为 2。 !!2 计算结果为 true，然后 React 渲染条件的第二部分，即标签数组。

如果你愿意，你可以这样写你的条件:

renderLabels() {
  const { inputDataArr } = this.state;
  if (inputDataArr.length > 1) {
    return inputDataArr[0].labelArr.map((label, index) => (
      <tr key={label}>
        <th>{index}</th>
        <th>{label}</th>
      </tr>
    ));
  }
}