小编mai*_*n.m的帖子

我在 React Router 上遇到了一些我似乎无法弄清楚的问题。它不会返回到访问的最后一页，而是返回它加载的第一页。这是一个例子。

索引.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import PrivateRoute from './utils/auth/PrivateRoute';
    <Router>
      <PrivateRoute exact path="/dashboard" component={DashboardView} />
      <PrivateRoute exact path="/games" component={Games} />
      <PrivateRoute
        exact
        path="/viewgame/:id*/"
        component={SingleGameView}
      />
    </Router>

当您前往时/dashboard，您可以点击查看带您前往的游戏列表/games。然后，您可以单击游戏以查看它的单个视图，该视图会将您带到/viewgame/:id*

像这样：/dashboard -> /games -> /viewgame/:id*

当您单击一个游戏并被带到/viewgame/，然后决定在浏览器中单击返回时，它会将我带回/dashboard而不是带我回到 /games。它跳过上次访问的页面，并将我带回第一个加载的页面。我可以通过设置我自己的“点击返回”按钮将某人送回路线，但我需要浏览器实际的后退和前进按钮来执行此操作。

PrivateRoute是我设置的 HOC，用于检查以确保访问路由的用户是否经过身份验证。否则它们将被引导。如果这可能是这里的问题是该组件：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

//Utils - Auth
import { userAuth } …

我的后端路由存在问题，该路由res.status().send()只会向客户端发送状态代码，但不会向客户端发送位于send().

这是我的代码（为简洁起见，编辑了所有代码，但问题是）：

exports.user_signup = (req, res) => {
  const { body } = req;
  const { companyName, password, email } = body;

  User.find({ email: email }, (err, previousUsers) => {
    if (err) {
      return res.status(400).send({
        message: "There was an issue signing up."
      });
    } else if (previousUsers.length > 0) {
      return res.status(403).send({
        message: "Records show this email is linked to another account."
      });
    }
}

当我fetch request从客户端创建时，响应只status code从服务器返回，但响应中没有任何地方是send()服务器方法中的对象。只是随地吐痰，我把res.status(200).json(object)它扔到 …

我有一个简单的表单，将用户输入发布到服务器。提交表单后，页面加载时间较长，导致 ERR_EMPTY_RESPONSE。但是，我可以console.log很好地从表单中输入内容来验证表单确实已发布到服务器。

这是我正在处理的内容：

<form method="post" action="/">
    <input type="text" name="userZipcode" placeholder="Enter your zip code">
    <button type="submit">ENTER</button>
</form>

和

app.use(bodyParser.urlencoded({
    extended: false
}));

app.use(bodyParser.json());

app.get('/', (req, res, next) => {
    fetch(url)
    .then(res => res.json())
    .then(data => res.render('pages/index'))
    .catch(err => {
        console.log(err);
        res.sendStatus(500);
    });
});

app.post('/', function(req, res) {
    let zipcode = req.body.userZipcode;
    console.log('Your location is: ' + zipcode);
});

注意：获取请求最终会将数据从 API 响应传递到我的 EJS 页面，但目前它除了渲染索引页面之外什么也不做。

上面的表单有效，我console.log按照预期从终端的输入字段中获得了一个带有邮政编码的信息。但是，此后页面只会加载，直到出现上述错误为止。我知道我错过了一些重要的东西，但我不知道那是什么！

我遇到的问题previousState是每次状态更新时不保留先前状态的数据。当我用新数据更新状态时，以前的状态将被清除，并且只有最近添加的数据可用。

这是第一块代码。此获取请求位于 内部componentDidMount()，因此每次刷新组件时，它都会重新获取新数据并更新状态：

fetch('/mileage-data')
    .then(res => res.json())
      .then(data => {
        const state = this.state;
        const test = data.data.startingOdo;
        const test2 = data.data.endingOdo;

        if(!state.startingOdometer || !state.startingOdometer) {
          this.setState({ 
            startingOdometer: data.data.startingOdo,
            endingOdometer: data.data.endingOdo
          })
        }

        this.setState(prevState => ({
          startingOdometer: [...prevState, test],
          endingOdometer: [...prevState, test2]
        }))

      })
      .catch(err => {
         console.log(err);
      })

这就是状态的样子：

this.state = {
  startingOdometer: '',
  endingOdometer: ''
}

首先，我检查初始状态是否未定义，如果是，则省略先前的状态，仅添加新数据。

我的理解是你不应该改变状态，所以使用类似push()创建数组之类的东西似乎与此不一致。我的想法是，通过使用以前的状态，我可以制作一个全新的更新版本的状态，其中包括数组中的以前和新的数据。

注意：我已经使用 Postman 来检查这个/mileage-dataGET 路由，它确实按照我的预期发送回了数据。所以我知道有数据被发送回此获取请求。

这就是我遇到问题的地方：

this.setState(prevState => ({
  startingOdometer: [...prevState, test],
  endingOdometer: …

我试图像这样forEach()将函数的索引传递到函数参数中addEventListener：

dispensaryLocations.forEach((location, i) => {
  location.addEventListener('click', clickLocationToOpenMarker(i));
});

这是clickLocationToOpenMarker()函数：

  const clickLocationToOpenMarker = id => {
    infoWindowContents.map(infowindow => {
      infowindow.close();
    });
    google.maps.event.trigger(markers[id], 'click');
  };

对于contex：markers是一组Google Maps标记，单击它们后，打开一个显示有关位置信息的信息窗口。infoWindowContents是一个数组，其中包含每个标记的所有相应信息窗口。但是，我在这里与Google Maps API无关，更多的是试图在addEventListener不触发参数的情况下将参数传递给函数。

我的问题是，当我addEventListener像这样传递函数时：element.addEventListener('click' clickLocationToOpenMarker)该函数按预期分配给每个元素，而没有立即调用并运行。

需要说明的是，我需要i像这样将变量作为参数传递给函数：element.addEventListener('click', clickLocationToOpenMarker(i))这样，函数Google Maps Marker才能知道要打开哪个变量。但是，一旦我将自变量添加到函数的参数中（与上面的示例不同），该函数将在forEach()循环的每次迭代中立即被调用并触发。

为什么addEventListener在传递参数时立即触发函数，但是当没有参数传递给函数时，它只是对其进行赋值？