小编Yil*_*maz的帖子

我的代码中有这个功能：

let request = require("request");
let getDrillDownData = function (userId, query, callback) {

query.id = userId;
let urlQuery = buildUrlFromQuery(query);

request.get({
    url: urlQuery,
    json: true
}, function (error, response, data) {
    if (!error && response.statusCode === 200) {
        return callback(null, calculateExtraData(data));
    } else if (error) {
        return callback(error, null);
    }
});


};

我希望编写一些单元测试来验证当使用正确的参数调用函数时，它运行正常，如果出现错误，它确实返回了错误

我写了这个单元测试代码：

describe.only('Server Service Unit Test', function(){
var sinon = require('sinon'),
    rewire = require('rewire');

var reportService;
var reportData = require('./reportData.json');

beforeEach(function(){
    reportService = rewire('../../services/reports.server.service');
});

describe('report methods', function(){ …

以下是我的功能组件与问题的相关代码，

在 useState() 钩子中对数据进行一些处理后，如何设置初始值？

const data = props.data ? props.data : {};
const statusOptions = [
  { label: "Active", value: "active" },
  { label: "Inactive", value: "inactive" },
  { label: "Complete", value: "completed" },
];
const defaultStatus = statusOptions.filter(
  option => option.value === data["status"],
)[0];

//This does not work
const [status, setStatusValue] = useState(defaultStatus);
console.log(status); //undefined

//Below works
const [status, setStatusValue] = useState({
  label: "Complete",
  value: "completed",
});
console.log(status); //{label:"Complete",value:"completed"}

我正在使用路线来获取页面 ex。page/[id].js并仅显示该 id 的数据。那么每次访问该页面时它都会重新获取数据吗？前任。通过此页面上的链接转到下一页，然后按返回返回此页面。就像在 React.js 中使用DidComponentMount它获取数据一样，每次安装时都会进行获取，即使您返回时已经访问过该页面。

export async function getStaticProps(context) {
    const res = await fetch(`https://.../data/${context.params.id}`)
    const data = await res.json()
    return {
        props: { data }
    }
}

我正在学习 DApp 编程，出现的一个问题是 Metamask 和 web3.js 注入的 API 之间的区别。据我了解，MetaMask 注入一个有自己的 API 的对象，与 web3.js 库无关。它是否正确？我仍然可以将 web3.js 库与 MetaMask 一起使用吗？在后一种情况下，我该怎么办？如果有人能进一步解释这种差异，我将不胜感激。谢谢！

以下代码片段可以与 React + Javascript 配合使用：

import React, { useRef } from "react";

import Editor from "@monaco-editor/react";

function App() {
  const editorRef = useRef(null);

  function handleEditorDidMount(editor, monaco) {
    editorRef.current = editor;
  }

  function showValue() {
    alert(editorRef.current?.getValue());
  }

  return (
    <>
      <button onClick={showValue}>Show value</button>
      <Editor
        height="90vh"
        defaultLanguage="javascript"
        defaultValue="// some comment"
        onMount={handleEditorDidMount}
      />
    </>
  );
}

export default App;

沙箱在这里。

我需要在 React + Typescript 应用程序中使用它，所以我必须添加类型。

应该用于什么类型editor？

尝试过这样的：

  function handleEditorDidMount(editor: HTMLInputElement) {
    editorRef?.current = editor;
  }

  function showValue() {
    // eslint-disable-next-line …

router.query.title当我刷新页面时消失。

据我发现，我必须使用 getServerSideProps，但我不知道在 getServerSideProps 上输入什么。或者有什么办法可以做到吗？

编辑：我尝试了 Yilmaz 的解决方案并删除了 as={} 现在它可以工作了。但是现在查询链接太长而不使用 as={} 有什么解决方案吗？

索引.tsx

const Projects = () => {
  const [projects, setProjects] = useState(data);

  {projects.slice(0, loadMore).map((project) => (
          <Link
            key={project.id}
            href={{
              pathname: "/projects/" + project.title,
              query: {
                id: project.id,
                category: project.category,
                title: project.title,
                image: project.image.src,
                image1: project.image1.src,
                image2: project.image2.src,
                image3: project.image3.src,
                image4: project.image4.src,
                image5: project.image5.src,
              },
            }}
            as={"/projects/" + project.title}
            passHref={true}
          >
}

[id].tsx

import { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async (context) => { …

即使我只在其中创建 Slice 并通过 Redux Saga 解决中间件，使用 Redux Toolkit 是否可以？

或者在这种情况下，最佳实践是使用 Redux Saga + raw Redux 而不使用 Toolkit？

谢谢

我正在尝试返回 HTTP 状态代码 410（消失）以及自定义的简单 HTML：

   <h1>Error 410</h1>
   <h2>Permanently deleted or Gone</h2>
   <p>This page is not found and is gone from this server forever</p>

是否可以？因为我在NextResponse对象上找不到方法。

如何从中间件返回 HTML？

我有一个通过其父级加载的组件。该组件呈现其自己的组件 - ActionsBar 和 Collection。当 URL 更改并且 Outlet 被重新渲染时 - 我的假设是组件内的所有内容都会被重新渲染，但是它似乎只在子组件发生更改时重新渲染它们。

export default function ComponentLoadedInOutlet() {
  const collectionData = useLoaderData();
  return (
    <div>
      <ActionsBar />
      <Collection data={collectionData} />
    </div>
  )
}

在上面的代码片段中，当 URL 更改时重新加载插座时，只有 Collection 组件被重新渲染，因为 collectionData 已更改。

我想知道是否有一种方法可以强制重新加载插座中的所有子组件，这样我就不必费力地重置大量状态。

我正在使用应用程序路由器在 nextjs 中构建一个博客网站。我被静态网站生成困住了。我尝试阅读nextjs 的官方文档，但无法理解它......请帮助我。这是我的项目结构。我有一个存储博客数据的文件，即 blogData.js

import { FullStackDeveloper, GraphicDesigner } from "@/assets/team";
    
    const BlogData = [
      {
        id: 0,
        title: "Exploring the Power of React.js for Interactive Web Applications",
        cover: FullStackDeveloper,
        desc: "Delve into the incredible capabilities of React.js for creating dynamic and interactive web applications. Discover how React.js enhances user experience, improves performance, and enables seamless data management. Gain insights into the benefits and best practices of using React.js for your next web development project.",
        keywords: …