Javascript 当我按下鼠标上的按钮时，返回json而不是html和css

我有两个页面的web应用程序（backend-node.js和frontendreact）。第一页是菜单，第二页是订单。当我从“订单”转到“菜单”并按下鼠标键时，我从网页中获取json。数据加载正确，但页面不显示html，仅显示json。当我在浏览器中按back时，一切正常。 这是我的订单代码

import React, {Component} from 'react';
import MyNavbar from './MyNavbar';
import axios from 'axios';
import {Alert} from 'reactstrap';
import BuildOrder from './BuildOrder';

class Order extends Component {

constructor(props) {
    super(props);
    this.state = {
        orders: [],
        visible: false,
    };
}

componentDidMount() {
    this.getOrders();
    if (this.props.location.state && this.props.location.state.alertMessage) {
        this.handleUpdateStatus(this.props.location.state.alertColor, this.props.location.state.alertMessage);
    }
}

handleUpdateStatus(color, message) {
    this.setState({alertColor: color, alertMessage: message});
    this.onShowAlert();
}

getOrders() {
    const url = '/orders';
    axios.get(url).then(response => {
        this.setState({orders: response.data})
    });
};

onShowAlert = () => {
    this.setState({visible: true}, () => {
        window.setTimeout(() => {
            this.setState({visible: false},
                this.props.history.replace({...this.props.location.pathname, state: {}}))
        }, 5000)
    });
};

toggle() {
    this.setState({
        visible: !this.state.visible
    });
};

handleClickDelete = order => {
    axios.delete('/order', { data: { name: order.name, build: order.build } }).then((message) => {
          this.getOrders();
          this.handleUpdateStatus(message.data.type, message.data.content);
      }
    )
      .catch((err) => {
          this.getOrders();
          this.handleUpdateStatus('danger', err.message);
      });
};

handleClickUpdate(evt, data) {
    axios({
        method: 'put',
        url: '/orders',
        headers: {},
        data: data
    }).then(() => {
            this.handleUpdateStatus('success', 'Platba aktualizována');
        }
    ).catch((err) => {
        this.handleUpdateStatus('danger', err.message);
    });
}

handleClickOrder(evt, data) {
    evt.preventDefault();
    axios({
        method: 'post',
        url: '/send/order',
        headers: {},
        data: data
    }).then((message) => {
          this.handleUpdateStatus(message.data.type, message.data.content);
      }
    ).catch((err) => {
        this.handleUpdateStatus('danger', err.message);
    });
}

getOnTop(){
    window.scrollTo(0, 0);
};

render() {
    const orders = this.state.orders;
    let ordersBuildA = [];
    let ordersBuildB = [];

    let handleClickDelete = this.handleClickDelete;
    let handleClickUpdate = this.handleClickUpdate.bind(this);
    let handleClickOrder = this.handleClickOrder.bind(this);
    let getOnTop = this.getOnTop;

    return (
        <div>
            {orders.filter(order => order.build === 'A').forEach(order => ordersBuildA.push(order))}
            {orders.filter(order => order.build === 'B').forEach(order => ordersBuildB.push(order))}
            <MyNavbar/>
            <Alert className="text-center" color={this.state.alertColor} isOpen={this.state.visible}
                   toggle={this.toggle.bind(this)}>
                {this.state.alertMessage}
            </Alert>
            <div className="container">
                <BuildOrder build="A" orders={ordersBuildA} handleClickDelete={handleClickDelete.bind(this)}
                            handleClickUpdate={handleClickUpdate.bind(this)} handleClickOrder={handleClickOrder.bind(this)} getOnTop={getOnTop.bind(this)}/>
                <BuildOrder build="B" orders={ordersBuildB} handleClickDelete={handleClickDelete.bind(this)}
                            handleClickUpdate={handleClickUpdate.bind(this)} handleClickOrder={handleClickOrder.bind(this)} getOnTop={getOnTop.bind(this)}/>
            </div>
        </div>
    );
}
}

export default Order;

import React，{Component}来自'React'；
从“/MyNavbar”导入MyNavbar；
从“axios”导入axios；
从“reactstrap”导入{Alert}；
从“/BuildOrder”导入BuildOrder；
类顺序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
订单：[]，
可见：假，
};
}
componentDidMount（）{
这个.getOrders（）；
if（this.props.location.state&&this.props.location.state.alertMessage）{
this.handleUpdateStatus（this.props.location.state.alertColor，this.props.location.state.alertMessage）；
}
}
handleUpdateStatus（颜色、消息）{
this.setState（{alertColor:color，alertMessage:message}）；
这个.onShowAlert（）；
}
getOrders（）{
常量url='/orders'；
获取（url）。然后（响应=>{
this.setState（{orders:response.data}）
});
};
onShowAlert=（）=>{
this.setState（{visible:true}，（）=>{
window.setTimeout（（）=>{
this.setState（{visible:false}，
this.props.history.replace（{…this.props.location.pathname，状态：{}））
}, 5000)
});
};
切换（）{
这是我的国家({
可见：！this.state.visible
});
};
handleClickDelete=订单=>{
delete（'/order'，{data:{name:order.name，build:order.build}}）{
这个.getOrders（）；
此.handleUpdateStatus（message.data.type、message.data.content）；
}
)
.catch（（错误）=>{
这个.getOrders（）；
此.handleUpdateStatus（“危险”，错误消息）；
});
};
handleClickUpdate（evt，数据）{
axios({
方法：'放'，
url:“/orders”，
标题：{}，
数据：数据
}).然后（（）=>{
此。handleUpdateStatus（“成功”，“Platba aktualizována”）；
}
).catch（（错误）=>{
此.handleUpdateStatus（“危险”，错误消息）；
});
}
handleClickOrder（evt，数据）{
evt.preventDefault（）；
axios({
方法：“post”，
url:“/send/order”，
标题：{}，
数据：数据
})。然后（（消息）=>{
此.handleUpdateStatus（message.data.type、message.data.content）；
}
).catch（（错误）=>{
此.handleUpdateStatus（“危险”，错误消息）；
});
}
getOnTop（）{
滚动到（0，0）；
};
render（）{
const orders=this.state.orders；
让ordersBuildA=[]；
让ordersBuildB=[]；
让handleClickDelete=this.handleClickDelete；
让handleClickUpdate=this.handleClickUpdate.bind（this）；
让handleClickOrder=this.handleClickOrder.bind（this）；
让getOnTop=this.getOnTop；
返回(
{orders.filter（order=>order.build==='A'）.forEach（order=>ordersBuildA.push（order））}
{orders.filter（order=>order.build==='B'）.forEach（order=>ordersBuildB.push（order））}
问题是，我为前端和后端调用了相同的url。当我将/api/orders添加到后端时，一切都正常。
您有两个这样的语句
{orders.filter（..）.forEach（..）}
.forEach
不返回任何内容。您想做什么？您可以提供一个示例，让我们看到所有组件一起工作吗？@Titus它应该过滤所有订单，这些订单具有构建类型A或B并插入到相关数组中，但您在JSX代码中有这些语句。如果它们不返回urn anything（不要向DOM添加任何内容）它们应该在
return
语句之前在外部。@Titus，可以。但是这个语句返回数据。功能应该可以。我有问题，当我按下鼠标上的后退按钮时，页面上的是json而不是html
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import NotFound from './componets/NotFound';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Order from './componets/Order';

const RouterMapping = () => (
    <Router>
        <Switch>
            <Route path='/' exact component={App}/>
            <Route path='/orders' exact component={Order}/>
            <Route exact component={NotFound}/>
        </Switch>
    </Router>
);

ReactDOM.render(
    <RouterMapping/>,
    document.getElementById('root')
);

module.hot.accept();
serviceWorker.unregister();