在渲染函数之外运行对象数组

Question

在componentDidMount 中编译定义变量都失败。我做了很多其他方法。似乎没有一个适用于我的特定代码。我认为阅读比试图解释更好。

import React from 'react';
import { connect } from './api';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      giphy: []
    }
  }

  componentDidMount(){
    connect(message => {
      this.setState({
        giphy: message
      })
    });
    var Items = this.state.giphy.map(function(gif){ // items is not defined.
      return <li>{gif}</li>;
    })
  }

  render () {
      return (
        <div className=".App-logo">
            <ul>
              { Items } // I wanted to show all items inside the array of objects.
            </ul>

            <ul className=".App-logo"> 
            // the following method works. We need to make sure to check for this conditions or wont work
              {this.state.giphy && this.state.giphy.length > 0   &&
                <img src={ this.state.giphy[2].images.original.url}
                alt="giphy.com animations"/>}
            </ul>
      </div>
    )
  }
}

如果我删除项目，它将显示状态中的第二个项目。 你能帮忙展示一下状态吗？

Answer 1

您可以在render 方法中直接map 您的状态，而不是在componentDidMount 中创建一个不能在render 方法中使用的变量。

<ul>
   //This will show only `bitly_gif_url`
   {Array.isArray(this.state.giphy) && this.state.giphy.map(gif => <li>{gif.bitly_gif_url}</li>) } 
</ul>

注意：您的giphy 数组包含多个对象。在每个对象中，我使用{gif.bitly_gif_url} 仅显示了bitly_gif_url，如果您需要显示对象中的任何其他项目，您可以更改它的键。

您也可以一次显示多个项目，

<ul>
   //This will show `bitly_gif_url` and `embed_url` at a time
   {Array.isArray(this.state.giphy) && this.state.giphy.map(gif => <li>{gif.bitly_gif_url} {gif.embed_url}</li>) } 
</ul>

Answer 2

由于您在 componentDidMount 函数中定义了 Items，它具有功能范围，并且在 render 函数中不可用，您可以做的是从函数中返回项目。所以现在你的代码看起来像

import React from 'react';
import { connect } from './api';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      giphy: []
    }

  }

  componentDidMount(){
    connect(message => {
      this.setState({
        giphy: message
      })
    });
  }

  getItems() {
    return this.state.giphy.map(function(gif){
      return <li>{gif}</li>;
    })
  }

  render () {
      return (
        <div className=".App-logo">
            <ul>
              { this.getItems() } // I wanted to show all items inside the array of objects.
            </ul>

            <ul className=".App-logo"> 
            // the following method works. We need to make sure to check for this conditions or wont work
              {this.state.giphy && this.state.giphy.length > 0   &&
                <img src={ this.state.giphy[2].images.original.url}
                alt="giphy.com animations"/>}
            </ul>
      </div>
    )
  }
}