无法获取先前声明的数组元素以在 ReactJS 渲染中使用它

Question

我之前从 API 中获取了一个数组。我将它保存到变量 "ids" 中。问题是 "ids" 变量在渲染中为空。如何查看我保存在 "ids" 变量中的先前声明的值？

这是我的实际代码。

import React, { Component } from 'react';
import ReactSVG from 'react-svg';
import logo from './logo.svg';
import avatar from './avatar.jpg'
import './component.css'

import Msg from './components/Msg';
import ItemMsg from './components/ItemMsg';
import Sidebar from './components/Sidebar';
var ids = [];
var componente = [];

class App extends Component {


  componentDidMount() {
     fetch('/todos/ids')
    .then((response) => response.json())
    .then((responseJson) => ids = responseJson.data)
    .then(console.log)
  }

  render() {

    var id;

    for (var i = 0; i < ids.length; i++) {
      id = ids[i];
      componente.push(<li><ItemMsg idfromparent={id}/></li>);
    }

    return (
      <div>
        <Sidebar/>
        <Msg/>
        <ul>
          {componente}
        </ul>
      </div>
    );
  }
}

export default App;

Answer 1

试试这样的东西：

import React, { Component } from 'react';
import ReactSVG from 'react-svg';
import logo from './logo.svg';
import avatar from './avatar.jpg'
import './component.css'

import Msg from './components/Msg';
import ItemMsg from './components/ItemMsg';
import Sidebar from './components/Sidebar';

class App extends Component {
  componentDidMount() {
     fetch('/todos/ids')
    .then((response) => response.json())
    .then((responseJson) => this.setState({ids: responseJson.data}))
    .then(console.log)
  }

  render() {
    var ids = this.state && this.state.ids ? this.state.ids : []; 
    var componente = [];
    for (var i = 0; i < this.state.ids.length; i++) {
      componente.push(<li><ItemMsg key={ids[i]} idfromparent={ids[i].ID_Publicacion}/></li>);
    }

    return (
      <div>
        <Sidebar/>
        <Msg/>
        <ul>
          {componente}
        </ul>
      </div>
    );
  }
}

export default App;

Answer 2

您的问题不是列表 ids 的值没有更新，而是。这里的问题是你的组件没有理由根据该变量的变化重新渲染，即使它在它的渲染中使用它。触发组件重新渲染的唯一方法是调用 setState.

一种方法是使用 componentDidMount 生命周期挂钩。执行异步调用，然后调用 setState。重新渲染组件并使用 state.users 的填充值。

这是一个人为的例子。我相信你可以根据你的情况进行调整：

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

    this.state = {
      users: []
    };
  }

componentDidMount() {
  fetch('/users')
    .then(users => this.setState({ users });
}

render() {
  return (
    <ul> 
      { 
        this.state.users && this.state.users.map(user => <li> { user.name } </li>);
     }
    </ul>
    );
  }
}

无法获取先前声明的数组元素以在 ReactJS 渲染中使用它

Can't get array elements previously declared to use it in render with ReactJS

fetch

node.js

express

reactjs