React/Redux在生产环境中返回HTML的变量

Question

我目前正在开发一个React Web应用程序，在构建和服务应用程序时，我用来存储时间表的变量被填充了页面的HTML？

该应用程序在开发中完美运行，但在生产中存在问题。

变量是使用Redux动作获取的，其中对数据库进行查询。

---

组件：

import React, { Component, useEffect, useState, Fragment } from 'react';
import Game from './Game';

//Redux
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getSchedule } from '../actions/schedule';

const Schedule = ({ scheduleObj:{schedule, loading}, getSchedule }) => {
  useEffect(() => {
    getSchedule('all');
  }, [loading]);

  const [type, setType] = useState(0);

  const onChange = e => {
    getSchedule(e.target.value);
  };

  if (loading) {
    return <div>Schedule Loading</div>;
  } else {
    return (
      <Fragment>
        <p>Schedule</p>

        <select id='schedule' onChange={e => onChange(e)}>
          <option value='all'>All Sports</option>
          <option value='fav'>Favourite Sports</option>
          <option value='mbasketball'>Axemen Basketball</option>
          <option value='mfootball'>Axemen Football</option>
          <option value='mhockey'>Axemen Hockey</option>
          <option value='msoccer'>Axemen Soccer</option>
          <option value='mswimming'>Axemen Swimming</option>
          <option value='wbasketball'>Axewomen Basketball</option>
          <option value='wcrosscountry'>Axewomen Cross Country</option>
          <option value='wrugby'>Axewomen Rugby</option>
          <option value='wsoccer'>Axewomen Soccer</option>
          <option value='wswimming'>Axewomen Swimming</option>
          <option value='wvolleyball'>Axewomen Volleyball</option>
        </select>
        {schedule}

      </Fragment>
      /*
      (schedule.length <1000) ? (schedule.map(game => (
          <Game key={game._id} gameID={game._id}/>
        ))) : 'Empty Schedule'
      */
    );
  }
};
Schedule.propTypes = {
  getSchedule: PropTypes.func.isRequired,
  scheduleObj: PropTypes.object.isRequired,
  loading: PropTypes.bool
};

const mapStateToProps = state => ({
  scheduleObj: state.schedule,
  loading: state.loading
});

export default connect(mapStateToProps, { getSchedule })(Schedule);

---

被填充HTML的变量是schedule变量。

举个例子（只是将schedule的内容绘制成文本）：

---

这就是页面应该看起来的样子

---

schedule变量应该包含一个JSON对象数组。 下面是在开发中console.log()记录的内容。

---

带有响应的网络标签（生产）：

---

- Sean Moody

---

嗨，肖恩，你能告诉我变量schedule是从哪里来的吗？它就在代码中选择标签关闭后面。 </select> {schedule} 这可能是问题的原因吗？ - Anuradha Kumari

好的，但我没有看到该组件的任何日程安排属性。您是不是想使用scheduleObj代替？ - Anuradha Kumari

scheduleObj 包含 schedule 和 loading，我们在函数组件的参数中对其进行解构。 - Sean Moody

哦，好的，我明白了。对不起，我错过了它。你能不能使用控制台日志来检查从 props 中实际传递的 schedule 内容呢？因为当你将状态映射到 props 时，你已经将状态中的 schedule 映射到了 scheduledObj 属性中，并且你还创建了一个独立的 loading 属性。请重新验证你的 props 和状态映射以确保一切正确。const mapStateToProps = state => ({ scheduleObj: state.schedule, loading: state.loading }); - Anuradha Kumari

让我们在聊天中继续这个讨论。 - Anuradha Kumari

Answer 1

我发现了可能的问题。我们通过在package.json文件中定义的代理运行后端请求，但这不是生产环境中使用的功能。

找到解决方法后会进行更新。

更新：这就是问题所在。将应用程序部署到Heroku上可以正常工作！

- Sean Moody

---

嘿，肖恩！我有完全相同的问题。Redux返回的是HTML元素而不是JSON对象。你特别改了什么让它在生产环境中工作？ - Matthew Francis