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

您可以在componentDidMount方法中直接render来map状态，而不必在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

注意：您的bitly_gif_url数组包含许多对象。对于每个对象，我仅使用{gif.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>，如果需要显示对象中的任何其他项目，则可以更改其键。

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

create-react-app

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>
    )
  }
}

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

2 个答案: