Question

我在处理我的代码。首先是我的App.js：

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import Flat from './components/flat.js'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flats: []
    };
  }


componentDudMount() {
    const url = "https://raw.githubusercontent.com/lewagon/flats-boilerplate/master/flats.json";
    fetch(url)
      .then(response => response.json())
      .then((data) => {
      this.setState({  //console.log(data);
        flats: data
      });
    })
  }

  render() {
    return (
      <div className="app">
      <div className="main">
        <div className="search">
        </div>
        <div className="flats">
          {this.state.flats.map((flat) => {
            return <Flat flat={flat} />
          })}
        </div>
      </div>
      <div className="map">
      </div>
      </div>
    );
  }
}

export default App;

然后我的flat.js

import React from "react";
import "./flat.css";

class Flat extends React.Component {
    render() {
        const title = this.props.flat.price 
        + this.props.flat.priceCurrency + " - " + this.props.flat.name;

        const style = {
            backgroundImage: `url('${this.props.flat.imageUrl}')`
        };

        return (
            <div className="flat">
                <div className="flat-picture" style={style}></div>
                <div className="flat-title">
                {title}
                </div>
            </div>


        );
    }
}

export default Flat

首先在线应该更新状态我写了一个console.log应该给我一个登录控制台。它没有，我的控制台是空白的。我所做的就是通过create-react-app设置我的反应。

第二件事，我的代码没有获取json。我坐了几个小时，看不出什么错。提前感谢您的帮助。

我关注的视频：https://www.youtube.com/watch?v=_ZTT9kw3PIE&t=3665s&index=4&list=PL3IsCNRIBp-jOC5vjf1ITYDVgwngDqtzz

Answer 1

需要componentDidMount()而不是componentDudMount()，还有一件事将渲染方法更改为这样，这样只会在状态更新时进行渲染

render() {
   if(!this.state.flats){
      return(<div>Loading ......</div>
      }
    return (
      <div className="app">
      <div className="main">
        <div className="search">
        </div>
        <div className="flats">
          {this.state.flats.map((flat) => {
            return <Flat flat={flat} />
          })}
        </div>
      </div>
      <div className="map">
      </div>
      </div>
    );
  }

Answer 2

你有一个lifecyle hook componentDidMount

的类型

其次，console.log（）语句在对象内无效，所以

  this.setState({ //console.log(data);
    flats: data
  });

无效，

您可以在console.log()之前获得setState声明

fetch(url)
  .then(response => response.json())
  .then((data) => { 
  console.log(data);
  this.setState({  
    flats: data
  });
})

或使用功能setState（虽然它在这里并不是真的有用）

fetch(url)
  .then(response => response.json())
  .then((data) => { 
  this.setState(() => {
    console.log(data);
     return {flats: data}
  });
})

控制台将无法正常工作/状态不会更新

2 个答案: