时间戳

首页 > 解决方案 > 无法在单击按钮时使用 API 呈现数据

javascript - 无法在单击按钮时使用 API 呈现数据

问题描述

单击按钮时，无法呈现 API 数据。它会生成下面列出的两个错误。请告诉我如何解决这个问题。

错误详情：

  1. ./src/router/AppRouter.js 尝试导入错误：“反馈”未从“../components/Feedback”导出。

  2. ./src/components/Customerfeedbacks.js 语法错误：\src\components\Customerfeedbacks.js：缺少分号。(9:27) 编译失败。

反馈.js

import React from 'react';

class Feedback extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            employees: []
        };
        componentDidMount() {
            Fetch("http://localhost:3002/posts").then(res => res.json()).then(
                (result) => {
                    this.setState({
                        employees: result
                    });
                }
            );

        };
    }
    render() {
        return (
            <div>
                <h2>Employees Data...</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Location</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.employees.map(emp => (
                            <tr key={emp.Id}>
                                <td>{emp.Id}</td>
                                <td>{emp.Name}</td>
                                <td>{emp.Location}</td>
                                <td>{emp.Salary}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        );
    }

}
const element=<EmployeeComponent></EmployeeComponent>

ReactDOM.render(element,document.getElementById("root"));

export default Feedback;

应用路由器.JS

import React from 'react';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import Header from '../components/Header';
import AddEvent from '../components/AddEvent';
import EventsList from '../components/EventsList';
import useLocalStorage from '../hooks/useLocalStorage.js';
import EditEvent from '../components/EditEvent';
import EventsContext from '../context/EventsContext';
import { About } from '../components/About';
import { Home } from '../components/Home';
import { Feedback } from '../components/Feedback';

const AppRouter = () => {
  const [books, setBooks] = useLocalStorage('books', []);

  return (
    <BrowserRouter>
      <div>
        <Header />
        <div className="main-content">
          <EventsContext.Provider value={{ books, setBooks }}>
            <Switch>
              <Route path="/about" component={About} exact />
              <Route path="/" component={Home} exact />
              <Route component={EventsList} path="/eventList" exact={true} />
              <Route component={AddEvent} path="/add" />
              <Route component={EditEvent} path="/edit/:id" />
              <Route component={Feedback} path="/feedback"/>
              <Route component={() => <Redirect to="/" />} />
            </Switch>
          </EventsContext.Provider>
        </div>
      </div>
    </BrowserRouter>
  );
};

export default AppRouter;

标签： javascriptreactjs

解决方案

您正在导入Feedback默认导出的，因此它的导入将是

import Feedback from '../components/Feedback';

对于您的第二个错误，您在then语句后添加了一个分号，因此只需复制粘贴即可。还要彻底阅读错误并尝试理解它们告诉你的内容

componentDidMount() {
fetch("http://localhost:3002/posts")
  .then((res) => res.json())
  .then((result) => {
    this.setState({
      employees: result,
    });
  });
}

推荐阅读