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

【问题标题】：beginner at react.js - rendering component from state which is updated laterreact.js 的初学者 - 从稍后更新的状态渲染组件
【发布时间】：2017-02-20 17:25:51
【问题描述】：

我正在尝试从使用 fetch 调用的 JSON 对象中测试渲染列表组件，但是我怀疑渲染是在返回 JSON 之前调用的，因为我收到未定义的错误。请注意调试警报（）获取值，但渲染已经在未定义时出错。我该如何处理？获取数据后有没有办法调用渲染函数？或者我怎么能用“？”来渲染数据？然后在数据到达时更新？请注意我的 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;

【问题讨论】：

是的，这是 React 或其他此类框架的基本功能。当没有数据并且状态发生变化时，您渲染一个占位符/加载/任何内容，组件将再次渲染并渲染实际数据。它不起作用的原因是因为您尝试访问 this.state.items.users... 并且它不存在所以它甚至无法访问该函数。

标签： reactjs asynchronous urlfetch

【解决方案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]？

【讨论】：

非常感谢柯南。我现在只是在做这个测试。我真的需要将完整的 JSON 对象存储在状态中，然后使用多个字段呈现一个列表。您的代码示例是否可以存储所有项目，然后使用 .map 输出许多
{first_name} blah blah {favourite_food}
。我现在试试你的代码。再次感谢，如果你能告诉我如何扩展以从项目 JSON 中列出几个项目，非常感谢？
我还不能让它工作。你能解释一下占位符是如何工作的吗？我需要定义它吗？别处。输出是关键字吗？抱歉，我对此很陌生，还有一些新的/JSX 语法，即？和===。再次感谢
将此行更改为： const placeholder = "waiting for items...";常量用户名 = (this.state.items === []) ？占位符：this.output(this.state.items.users[3].firstname;
嘿，andrew，你可以把占位符做成字符串，像这样的组件

【解决方案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;

【讨论】：