尝试通过axios遵循AJAX React教程

时间:2018-09-24 23:23:40

标签: javascript reactjs

我正在尝试按照本教程设置AJAX请求。我已经按照每个步骤进行了安装,并安装了所有必需的东西,但是却出现了这个错误:

未捕获的错误:目标容器不是DOM元素。

在此文件中

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class FetchDemo extends React.Component {
  constructor(props) {
    super(props);

this.state = {
  posts: []
  };
}

  componentDidMount() {
    axios.get(`http://www.reddit.com/r/${this.props.subreddit}.json`)
      .then(res => {
        const posts = res.data.data.children.map(obj => obj.data);
        this.setState({ posts });
      });
  }

  handleFieldChange(fieldId, value) {
    console.warn(`${fieldId}: ${value}`)
    this.setState({ [fieldId]: value });
}

  render() {
    return (
      <div>
        <h1>{`/r/${this.props.subreddit}`}</h1>
        <ul>
          {this.state.posts.map(post =>
            <li key={post.id}>{post.title}</li>
          )}
        </ul>
      </div>
     );
  }
}

ReactDOM.render( 
    <FetchDemo subreddit="reactjs"/>, 
    document.getElementById('root')
);

这里是提到的教程:https://www.codeproject.com/Articles/1129563/AJAX-Requests-in-React-How-and-Where-to-Fetch-Data

感谢您的帮助!

1 个答案:

答案 0 :(得分:4)

<div id="root"></div>

您需要在HTML代码中添加它