小编You*_*mar的帖子

我正在尝试从 Windows 10 卸载 Android Studio。但它没有在控制面板中列出，也没有卸载程序文件。我尝试了一种方法，使用regedit并转到HKEY_LOCAL_MACHINEAndroid Studio，我删除了该文件，但桌面上仍然有一个图标，单击它后会打开 Android Studio。谁能告诉我现在该怎么办？

这是使用 Context API 时非常常见的性能问题。本质上，每当上下文中的状态值发生变化时，提供者之间包装的整个组件都会重新呈现并导致性能下降。

如果我有这样的包装：

<CounterProvider>
        <SayHello />
        <ShowResult />
        <IncrementCounter />
        <DecrementCounter />
</CounterProvider>

价值道具为：

<CounterContext.Provider value={{increment, decrement, counter, hello }} >
  {children}
</CounterContext.Provider>

每次我增加组件的计数值时IncrementCounter，整个包装组件集都会重新呈现，因为这就是 Context API 的工作方式。

我做了一些研究并发现了这些解决方案：

1. 根据用例将上下文拆分为 N 个上下文：此解决方案按预期工作。
2. 使用以下方式包装值提供者React.Memo：我看到很多文章建议使用 React.Memo API，如下所示：

<CounterContext.Provider
  value={useMemo(
    () => ({ increment, decrement, counter, hello }),
    [increment, decrement, counter, hello]
    )}
>
  {children}
</CounterContext.Provider>

然而，这并没有按预期工作。我仍然可以看到所有组件都被重新渲染。使用 Memo API 时我做错了什么？Dan Abramov确实建议在一个开放的 React问题中采用这种方法

如果有人能帮我解决这个问题。谢谢阅读。

我有一个 React 应用程序，映射卡并且每张卡都有唯一的 id，尽管我在控制台中收到错误，有些卡不是唯一的：

\n

警告：遇到两个孩子使用同一把钥匙，2294264。键应该是唯一的，以便组件在更新时保持其身份。非唯一的键可能会导致子项被重复和/或\xe2\x80\x94 被忽略，该行为不受支持，并且可能会在未来版本中更改。

\n

这是构建我的卡片结构的代码：

function CreateCards(doc) {\n  return (\n    <SimpleCard\n      key={doc.newsid}\n      theCardId={doc.newsid}\n      categorietitle={doc.categorietitle}\n      newstitle={doc.newstitle}\n      date={format(new Date(doc.date), "dd/MM/yyyy")}\n      thenews={doc.thenews}\n      newsurl={doc.newsurl}\n    />\n  );\n}\n

这是映射卡片的代码：

      <div className="general-card1">\n        {this.state.noPlaceFound ? (\n          <h3 className="noPlaceFound">\n            <i className="fas fa-exclamation-circle fa-sm WarnIcon"></i>\n            \xd9\x84\xd8\xa7 \xd9\x8a\xd9\x88\xd8\xac\xd8\xaf \xd9\x86\xd8\xaa\xd8\xa7\xd8\xa6\xd8\xac\n          </h3>\n        ) : (\n          this.state.WasMap.map((v) => CreateCards(v._source))\n        )}\n      </div>\n

你能帮我么？

我有以下代码（也粘贴在下面），我想在其中制作两列的布局。在第一个中我放置了两个图像，在第二个中显示了一些文本。

在第一列中，我想要第一张图像width:70%和第二张图像position:absolute。最终结果应该是这样的

正如您所看到的，在上面的每个屏幕中，第二个图像部分位于第一个图像中768px。

我可以在第一个图像上部分定位第二个图像，但这不是动态的，如果您更改屏幕尺寸，您可以看到它是如何折叠的。

但无论我如何努力，我都达不到这个结果。

.checkoutWrapper {
  display: grid;
  grid-template-columns: 50% 50%;
}

.coverIMGLast {
  width: 70%;
  height: 100vh;
}

/* this .phone class should be dynamically  located partially on first image */
.phone {
  position: absolute;
  height: 90%;
  top: 5%;
  bottom: 5%;
  margin-left: 18%;
}

.CheckoutProcess {
  padding: 5.8rem 6.4rem;
}

.someContent {
  border: 1px solid red;
}

/* removing for demo purposes
@media screen and (max-width: 768px) {
  .checkoutWrapper …

我是 JS、React 和 TypeScript 的新手。我做了一个添加待办事项列表的教程。为了进行一些练习，我决定添加删除按钮和“删除最后一项”按钮。

删除完整列表效果很好（我为自己感到骄傲，哈！）但是“删除最后一项”不起作用，我尝试了不同的事情（例如只是todos.pop()）。

\nfunction App() {\n  const [todos, setTodos] = useState([])\n  const [input, setInput] = useState("")\n\n  // prevents default, adds input to "todos" array and removes the input from form\n  const addTodo = (e) => {\n    e.preventDefault()\n\n    setTodos([...todos, input])\n    setInput("")\n  }\n\n  // deletes the todo-list\n  const clearTodo = (e) => {\n    e.preventDefault()\n\n    setTodos([])\n  }\n\n  // deletes the last entry from the todo-list\n  const clearLastTodo = (e) => {\n    e.preventDefault()\n\n    setTodos(todos.pop())\n  }\n\n  return (\n …

我用来useNavigate转到该组件，并且需要ChatRoom在单击按钮时将数据（状态）传递给该组件。该组件位于路线上/chatroom。我正在使用 React Router Dom v6。我已阅读文档，但找不到我要找的内容。

export default function Home() {
  const [username, setUsername] = useState("");
  const [room, setRoom] = useState("");

  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/chatroom");
  };

  return (
    <button
      type="submit"
      className="btn"
      onClick={() => {
        handleClick();
      }}
    >
      Join Chat
    </button>
  );
}

早些时候，我的 Next.js 应用程序TypeError: Cannot read properties of null (reading 'default')在我从 CMS 渲染一些文章的代码中没有进行任何更改的情况下就开始抛出异常。

这是完整的日志：

这是我的代码：

import Image from "next/image";

export default function Articles({ articles }) {
  return (
    <div className="articles">
      {articles.map((article) => (
        <div className="article" key={article.id}>
          <div className="text">
            <h2>{article.title}</h2>
            <p>{article.content}</p>
          </div>
          <div className="image">
            <Image src={article.image} alt="" height={900} width={900} layout="responsive" />
          </div>
        </div>
      ))}
    </div>
  );
}

我有这个非常简单的 React 代码：

const onSelectTournament = (e) => {\n    console.log(e);\n};\n

还有这个 HTML：

<div onClick={onSelectTournament}></div>\n

但在控制台上，我没有获取对象，而是Event得到了这个地狱对象：

    SyntheticBaseEvent {_reactName: 'onClick', _targetInst: null, type: 'click', nativeEvent: PointerEvent, target: div.tournamentsBoxDescription, \xe2\x80\xa6}\naltKey: false\nbubbles: true\nbutton: 0\nbuttons: 0\ncancelable: true\nclientX: 382\nclientY: 269\nctrlKey: false\ncurrentTarget: null\ndefaultPrevented: false\ndetail: 1\neventPhase: 3\ngetModifierState: \xc6\x92 modifierStateGetter(keyArg)\nisDefaultPrevented: \xc6\x92 functionThatReturnsFalse()\nisPropagationStopped: \xc6\x92 functionThatReturnsFalse()\nisTrusted: true\nmetaKey: false\nmovementX: 0\nmovementY: 0\nnativeEvent: PointerEvent {isTrusted: true, delegateTarget: document, pointerId: 1, width: 1, height: 1, \xe2\x80\xa6}\npageX: 382\npageY: 269\nrelatedTarget: null\nscreenX: 382\nscreenY: 373\nshiftKey: false\ntarget: div.tournamentsBoxDescription\ntimeStamp: 102788.7999997139\ntype: "click"\nview: Window {window: Window, …

单击按钮时我希望Modal出现。该Modal组件添加了一个eventListener，因此当您在模态框外部单击时它会关闭。在 React 18 中，点击事件触发是因为按钮点击发生在Modal 渲染之前？如果我改为react 17，这种情况就不会发生。

在这里找到 CodeSandbox 。请注意，当您单击按钮时，show状态设置为 true。然后Modal组件渲染并直接调用close函数。

应用程序.js：

import { useState } from "react";
import Modal from "./Modal";
import "./styles.css";

export default function App() {
  const [show, setShow] = useState(false);

  const close = () => {
    setShow(false);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button
        onClick={(e) => {
          setShow(true);
        }}
      >
        Click
      </button>
      {show && <Modal close={close} />}
    </div>
  );
}

模态.js

import "./styles.css"; …

我有一个简单的app/components/organisms/Cookies.tsx模态窗口组件，我将其导入到app/page.tsx. 我已'use client'在组件顶部添加了指令，但由于某种原因，我不断收到：

ReferenceError：本地存储未定义

我的代码Cookies.tsx：

'use client';
import { useState } from 'react';

const Cookies = () => {
  const localStorageCookies = localStorage.getItem('cookies-accepted');
  const [cookiesAccepted, setCookiesStatus] = useState<boolean>(!!localStorageCookies);

  const acceptCookies = () => {
    localStorage.setItem('cookies-accepted', 'true');
    setCookiesStatus(true);
  }
  
  return (
    <>
      {!cookiesAccepted && (
        <section className="fixed max-w-md p-4 mx-auto bg-white border border-gray-200 left-12 bottom-16  rounded-2xl z-20">
          <h2 className="font-semibold text-gray-800 "> Cookie Notice</h2>

          <p className="mt-4 text-sm text-gray-600">
            We use cookies to ensure that …