Question

我正在尝试从使用fetch调用的JSON对象测试呈现列表组件，但是我怀疑在返回JSON之前调用了render，因为我得到了一个未定义的错误。请注意，debug alert（）获取值，但渲染在undefined上已经出错。我该如何处理？有没有办法在获取数据后调用render函数？或者我可以如何使用'？'来渲染数据？然后在数据到达时更新？请注意我的if（！object）不会在作为内联包装器调用时工作 - 为什么不呢？或者更为重要的是我将如何实现这一点？对于初学者问题，我很抱歉 - 我怀疑我的意思是使用数据框架来为显示做出反应，但我想开始学习更少的框架并获得基础知识。非常感谢！ - 代码是：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class ItemLister extends React.Component {
constructor(props ) {
    super(props);
    this.state = { items: [] };
}
componentDidMount() {
  let url = "http://localhost:8888";
  let iterator = fetch(url, {method: 'GET'});
  iterator
    .then(response => {
     //console.log('sss', response)
      return response.json();
    })
    .then(post => {
      //console.log(post)
      this.state.items = post;
      alert(this.state.items.users[3].firstname);
    });
} 
 output(object){
    if (!object){
        return '?';
    }else{
        return object;
    }
}
render() {        
    return(
        <div>
            <div>Items:</div>
            <div>{this.output(this.state.items.users[3].firstname)}</div>
        </div>  
    );
}
}              
export default ItemLister;

Answer 1

你的渲染功能可能是这样的：

render() { const username = (this.state.items === []) ? placeholder : this.output(this.state.items.users[3].firstname; return( <div> <div>Items:</div> <div>{username}</div> </div> ); }

基本上，在数据到达之前渲染一个占位符组件，因为你的数据提取是异步的并且在componentDidMount中，所以你的渲染最初会在你拥有数据之前发生。

虽然您可能想重新考虑一般构建此组件的方式，但为什么要专门访问用户[3]？

Answer 2

尝试此代码将为您提供帮助

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
class ItemLister extends Component {
  constructor(props) {
    super(props);
    this.state = { items: [], firstname: "" };
  }
  componentDidMount() {
    let url = "http://localhost:8888";
    let iterator = fetch(url, { method: "GET" });
    iterator
      .then(response => {
        //console.log('sss', response)
        return response.json();
      })
      .then(post => {
        //console.log(post)
        this.setState({
          items: post,
          firstname: this.state.items.users[3].firstname
        });
        alert(this.state.items.users[3].firstname);
      });
  }
  output(object) {
    if (!object) {
      return "?";
    } else {
      return object;
    }
  }
  render() {
    return (
      <div>
        <div>Items:</div>
        <div>{this.state.firstname}</div>
      </div>
    );
  }
}
export default ItemLister;

react.js中的初学者 - 从状态渲染组件，稍后更新

2 个答案: