数据未使用 axios 渲染/console.log，使用来自 mongoDB 的数据答案

【问题标题】：Data is not rendering / console.log using axios , using data from mongoDB数据未使用 axios 渲染/console.log，使用来自 mongoDB 的数据
【发布时间】：2020-04-14 16:37:56
【问题描述】：

我对端点的请求：http://localhost:3200/api/posts/ 使用 POSTMAN 返回一个对象数组，这些对象具有标题、描述和图像的值。

在我的前端，我制作了一个组件，它尝试使用 axios 和 useEffect 从 react 提取这些值，然后渲染它们。

const Posts = () => {

  let [posts, setPosts] = useState([])
  console.log(posts)

      useEffect(() => {
        axios.get("http://localhost:3200/api/posts/")
            .then(({ data })=> {
       console.log('data====',data);
              setPosts(
         data
       );
     })
            .catch(err => {
              console.log(err);
            })
    }, []);

  return (
    <ul>
            {posts.map((item, index) => <li key={index}>{item.title}</li>)}
    </ul>
  );




}

我正在获取数据的表单下方呈现帖子组件，标题正在显示，但组件未加载任何数据..

return (
    <>
    <form onSubmit={submitFormHandle}>
          <div className="form-group">
             <ToastContainer />
      </div>

     <label htmlFor="formGroupExampleInput">Title</label>
     <input type="text" className="form-control" id="formGroupExampleInput" placeholder="Example input" onChange={onChangeTitle}/>


    <div className="form-group">
      <label htmlFor="comment">description</label>
      <textarea className="form-control" rows="5" id="comment" onChange={onChangeDescription}></textarea>
          </div>

          <div className="form-group files">

        <label htmlFor="exampleFormControlFile1">Upload Cat Memes</label>
        <input
          type="file"
          className="form-control"
          id="exampleFormControlFile1"
          multiple
          onChange={onChangeFile}
        />
          </div>

        <button type="submit" className="btn btn-primary">
            Submit
        </button>

    </form>

      <h3>View your posts</h3>
      <Posts />
  </>
  );
};

我得到这个错误：

错误：在 XMLHttpRequest.handleError (xhr.js:80) 的 createError (createError.js:17) 处出现网络错误

【问题讨论】：

你能把它贴出来吗，你在 console.log('data====',data);
Error: Network Error at createError (createError.js:17) at XMLHttpRequest.handleError (xhr.js:80)
你能检查你的服务器是否正在运行。此错误通常在服务器未运行时出现。
我看到您的数据在 db 中，但您无法通过某种方式获取它
yes 并像这样设置标题 app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header( "Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });

标签： javascript reactjs express mongoose axios

【解决方案1】：

在您的后端允许 cors 并设置这样的标题。

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

【讨论】：

谢谢你，先生，帮了很多忙，很棒的收获，我个人做到了：var cors = require("cors"); app.use(cors()) app.use(function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });