Question

我正在关注当前教程： Youtube tutorial at 12:51 mins.

我希望在屏幕上看到一堆帖子，但屏幕仍然空白。看来我已经按照教程中的所有内容进行操作了。

import React, { Component } from 'react';

class Posts extends Component {

    constructor(props) {
        super(props);
        this.state = {
            posts: []
        }
    }

    componentWillMount() {
        fetch('https://jsonplaceholder.typicode.posts')
            .then(res => res.json())
            .then(data => this.setState({posts: data}))
    }

    render() { 
        const postItems = this.state.posts.map(post => (
            <div key={post.id}>
                <h3>{post.title}</h3>
                <p>{post.body}</p>
            </div>
        ));
        return ( 
            <div>
                <h1>Posts</h1>
                { postItems }
            </div>
         );
    }
}

export default Posts;

和

import React, { Component } from 'react';
import './App.css';
import Posts from './components/Posts'

class App extends Component {

  render() {
    return (
      <div className="App">
        <Posts />
      </div>
    );
  }
}

export default App;

我的浏览器屏幕保持空白，在控制台上看不到任何错误。我想念什么？

Answer 1

不知道本教程，但它看起来已经过时了...

这是您的App.js（父组件）：

import React, { Component } from 'react';
import Posts from './Posts';

export default class App extends Component {
  state = { posts: [] };

  //fetch the posts and store them in the state
  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(posts => this.setState({ posts }))
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div>
        {/* pass the state (posts) as props to Posts */}
        <Posts posts={this.state.posts} />
      </div>
    );
  }
}

这是您的Posts.js：

import React from 'react';

// No need for a class based comp
// destructure the props and you have all your data 
const Posts = ({ posts }) => (
  <div>
    {posts.map(post => (
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.body}</p>
        <hr />
      </div>
    ))}
  </div>
);

export default Posts;

实时演示：https://jsfiddle.net/ctszdue9/7/

Answer 2

尝试将副作用/ api调用放入

$(document).ready(function() {

    var audioUrls = [
    "http://marvelhotelbangkok.com/audio/0.mp3",
    "http://marvelhotelbangkok.com/audio/1.mp3",
    "http://marvelhotelbangkok.com/audio/2.mp3",
    "http://marvelhotelbangkok.com/audio/3.mp3",
    "http://marvelhotelbangkok.com/audio/4.mp3",
    "http://marvelhotelbangkok.com/audio/5.mp3",
    "http://marvelhotelbangkok.com/audio/A.mp3",
    "http://marvelhotelbangkok.com/audio/B.mp3",
    "http://marvelhotelbangkok.com/audio/C.mp3",
  ]

  $('select').on('change', function() {
    var from = $("#from").val();
    var to = $("#to").val();
    if (!from || !to) return;
    var audio = $("#player");
    audio[0].pause();
    $("#mp3_src").attr("src", audioUrls[from]);    
    audio.data("currentidx", from);
    console.log(from)
    audio[0].load();
    audio[0].play();
  });

  $("#player").on("ended", function() {
    var from = $("#from").val();
    var to = $("#to").val();
    if (!from || !to) return;
    var audio = $("#player");
    var src = $("#mp3_src").attr("src", audioUrls[from]);    
    var currentIdx = audio.data("currentidx") || 1;
    currentIdx++;
    console.log(currentIdx)
    var to = $("#to").val() || 8;
    if(currentIdx <= to){
        $("#mp3_src").attr("src", audioUrls[currentIdx]);
      audio.data("currentidx", currentIdx)
      audio[0].load();
        audio[0].play();
    }
  })

});

更改网址

componentDidMount() { }

TO

https://jsonplaceholder.typicode.posts/

为什么跟随React JS时出现黑屏？

2 个答案: