Question

我之前从带有fetch的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

您的问题不是列表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>
    );
  }
}

Answer 2

尝试类似：

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;

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

2 个答案: