时间戳

首页 > 解决方案 > 从服务器获取数据并在 html 中显示

reactjs - 从服务器获取数据并在 html 中显示

问题描述

在我的反应应用程序中，我想从服务器获取数据，然后将其显示为列表。即使我从服务器接收到数据，它仍然没有出现在 html 中。

服务器返回 json 如下：

{
   "files":["a.txt","b.txt","c.txt"]
}

这是我的代码：

import React, { Component, useState, useEffect } from "react";
import ReactPlayer from "react-player";
import ListGroup from "react-bootstrap/ListGroup";
import "bootstrap/dist/css/bootstrap.css";

function Watch() {
  const [state, setState] = useState({});

  function getFiles() {
    fetch("http://localhost:5000/get_videos_list")
      .then(res => res.json())
      .then(
        (result) => {
          console.log(result)
          setState({ result });
        },
      
        (error) => {
          console.log(error);
        }
      )
  }

  useEffect(() => {
    getFiles();
  }, []);
  return (

    <React.Fragment>
      <ul className="list-group">
        {state.files&&state.files.map(listitem => (
          console.log('test')
       
          // <li className="list-group-item list-group-item-primary">
          //   {listitem}
          // </li>
          
        ))}
      </ul>
    </React.Fragment>
  );
}

export default Watch;

它不会打印到控制台“测试”

标签： reactjs

解决方案

您正在使用

state.files

改为使用：

state.result.files.

问候。

推荐阅读