小编Roh*_*aul的帖子

这是在后端和前端运行良好的 Express Route 代码。

// 按 Vessel_type by_id 编辑/更新 - 工作

router.put("/:id", (req, res, next) => {
  Vessel_Type.findByIdAndUpdate(
    req.params.id,
    req.body,

    { new: true },
    (err, updatedRecord) => {
      if (err) {
        console.error(err);
        return next(err);
      } else {
        res.status(200).send(updatedRecord);
      }
    }
  );
});

这是我在 React 前端使用nock进行 API 测试的代码

  it("API test-3 - PUT (/api/vesseltype/id)", done => {
    nock(host)
      .defaultReplyHeaders({
        "access-control-allow-origin": "*",
        "Content-Type": "application/json"
      })
      .persist()
      .log(console.log)
      .put("/api/vesseltype/5c62cc8f1774b626cd7fdbe6", {
        vesseltype: "Super Large Cargo Ship-45"
      })
      .delayBody(1000)
      .reply(200, "PUT/EDIT data with reqheaders");

    axios …

我正在尝试将基于类的 React 组件迁移到 react-hooks。该组件的目的是从 HackerNews API 获取故事，并在每 5000 毫秒后通过再次点击 API 以获取新数据来进行轮询。

我面临的问题是使用下面的自定义钩子usePrevious()来比较我以前的状态和当前状态，并且只有在比较之后在 useEffect() 中执行一些其他函数我很可能在这里缺少自定义钩子或 useEffect 的一些基本实现()

我正在遵循这个官方指南

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

这是我的基于类的组件的代码，这是完美的工作。

下面是我基于钩子的组件

问题出在这一行

const fromPrevStoriesIds = usePrevious(prevStoriesIds);

该变量fromPrevStoriesIds在 return() 内给了我很好的价值，但在 useEffect() 内它未定义。

import React, { Component, useState, useEffect, useRef } from "react";
import axios from "axios";
import MUIDataTable from "mui-datatables";
import "./Dashboard.css";
import NewItemAddedConfirmSnackbar from "./NewItemAddedConfirmSnackbar";
import TextField from "@material-ui/core/TextField"; …

我在 Material-UI 组件中使用react-autosuggest在用户键入时获取建议。只是无法设置输入字段和建议文本的样式。

也许我在这里缺少一些基本的东西，任何指导都会非常有帮助。React-autosuggest 的官方dox在这里用于使用使用react-themeable 的主题技术。但我无法在我的 Material-UI 组件中实现它。

下面是我正在尝试使用的代码。

import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core/styles'
import Autosuggest from 'react-autosuggest';
import { defaultTheme } from 'react-autosuggest/dist/theme';

const useStyles = makeStyles(theme => ({
  container: {
    margin: 'auto',
    backgroundColor: theme.background.default,
  },
  innerTableContainer: {
    height: 'calc(100vh - 190px)',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: theme.background.paper,
  },
  react_autosuggest__container: {
    "position": "relative",
    "width": "440px",

  },
  react_autosuggest__input: {
    "width": "240px",
    "height": "30px",
    "padding": …