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

Posted 2023-03-11

【中文标题】数据未使用 axios 渲染/console.log，使用来自 mongoDB 的数据

【英文标题】：Data is not rendering / console.log using axios , using data from 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(); );

【参考方案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(); );