消失的值this.state.array ReactJS

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了消失的值this.state.array ReactJS相关的知识,希望对你有一定的参考价值。

我使用以下方法获取数组:

module.exports = {
          fetchIntegrations(self) {
            var encodedURI = "OMITTED";
            axios.get(encodedURI).then(function (r) {
              self.setState({
                response: r.data,
              })
            })
            return self
          }
        };

然后我用这个方法调用它:

_getIntegration(){
            var self = this;
            var axios = require("axios");
            axios.defaults.headers.common[ "Authorization"] = this.props.userInfo.isAuthorized

            api.fetchIntegrations(self);
            console.log("This " , this);
            console.log("This.state " , this.state);
            console.log("This.state.response ", this.state.response);

return this.state.response.map((integration) => {
    return (<NavBarItem key={integration.identifier}
             name={integration.displayName}/>);
            });
         }

这是NavBarItem类:

class NavBarItem extends React.Component {
  render() {
    return(
    <div className="navbaritem">                
            <Text className="navbaritem-name">{this.props.name}</Text>
            </div>
    );
  }
}

_getIntegration方法在此Layout类中(删节):

export class Layout extends React.Component {
constructor (props) {
    super(props)
this.state = {
        response: [],
      }
  }


componentDidMount = () => {
      this._getIntegration();
  }
}

当它在控制台中被记录时,它的项目中包含我的响应数组。在this.state和this.state.response中,响应数组以某种方式包含0个项目。我尝试在几个不同的地方使用setState()而没有运气。关于如何访问我的响应数组值的想法?我的目标是为数组中的每个对象创建NavBarItems,但是由于我的响应数组中没有项目,所以没有太多发生:(谢谢!!

答案

您应该重新构造代码,以便fetchIntegrations服务返回一个带有数据的promise,返回到Layout组件。您可以将console.log放在以下任何函数中:shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate如果要在每个阶段查看组件的状态。

我在CodeSandbox上发布了一个示例:https://codesandbox.io/s/lrvzm872v9

主要部分是Layout组件和fetchIntegration服务:

class Layout extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      response: [],
    }
  }

  componentDidMount() {
    fetchIntegrations().then((data) => {
      this.setState({
        response: data
      })
    })
  }

  getIntegrations() {
    const integrations =this.state.response.map((integration) => {
      return (
        <NavBarItem key={integration.identifier}
          name={integration.displayName} />
      )
    });
    return integrations;
  }
  render() {
    if (this.state.response.length == 0) { return null; }
    const integrations = this.getIntegrations();
    return (
      <nav>
      { integrations }
      </nav>
    )
  }
}

fetchIntegration:

function fetchIntegration(){
   var encodedURI = "OMITTED";
   return axios.get(encodedURI).then(function (r) {
          return r.data;
    }
}

以上是关于消失的值this.state.array ReactJS的主要内容,如果未能解决你的问题,请参考以下文章

React.js状态值为数组,怎么使用setState比较合适

reac实现控制输入框字符长度

Pyqt:选择某些下拉值的值时使QLabel消失

在 C++ 中将结构指针设置为 null 时存储的值消失

Reac入门

reac-redux使用