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。我们在这里想要的是忽略渲染。因此，如果我们两次使用逻辑非运算符，则会在此处得到一个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>
    ));
  }
}

在数组内部的对象中提取数组

1 个答案: