时间戳

首页 > 解决方案 > 尝试使用 axios 遵循 AJAX React 教程

javascript - 尝试使用 axios 遵循 AJAX React 教程

问题描述

我正在尝试按照本教程设置 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

谢谢您的帮助！

标签： javascriptreactjs

解决方案

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

你需要在你的 HTML 代码中有这个

推荐阅读