标签: use-state

因此，我尝试在 nextjs 应用程序中使用 useState，但是一旦我添加代码行来初始化 useState，它就会抛出一个弹出错误，并显示错误消息：TypeError: Cannot read properties of null (reading 'useState')

这是我的代码的简化版本：

import { useState } from 'react'

export default function Home() {
    return (
        <div>
            <Transactions />
        </div>
    )
}



const Transactions = () => {

    const [state, setState] = useState('test')
...
}

我正在运行的 React/Next 版本：

"next": "12.1.5",
"react": "18.0.0",
"react-dom": "18.0.0"

chrome开发工具的错误截图：

对于造成这种情况的原因有什么想法吗？谢谢

编辑 我这边非常愚蠢的错误，问题通过导入反应解决了......

这是一个从 Firebase 存储呈现数据并将其列出的组件。该函数要做的就是将从 firebase 存储中提取的视频设置为 useState。这样我就可以调用视频并映射到一个新组件中，该组件恰好是一个按钮列表。它工作得相对很好，问题是该组件渲染了两次，第一次它不保存状态中的视频，第二次它这样做。换句话说，该组件不会等待视频保存在状态中，而只是渲染自身，导致带有视频标题的按钮列表不显示。

// ReactJS
import { useState, useEffect } from "react";

// NextJS
import { useRouter } from "next/router";

// Seo
import Seo from "../../../components/Seo";

// Hooks
import { withProtected } from "../../../hook/route";

// Components
import DashboardLayout from "../../../layouts/Dashboard";

// Firebase
import { getDownloadURL, getMetadata, listAll, ref } from "firebase/storage";
import { storage } from "../../../config/firebase";

// Utils
import capitalize from "../../../utils/capitalize";
import { PlayIcon } from "@heroicons/react/outline";

function Video() {
  // States
  const [videos, setVideos] …

反应文档说：

\n

React 如何将 Hook 调用与组件关联起来？

\n\n

React 跟踪当前渲染的组件。由于 Hook 规则，我们知道 Hook 只能从 React 组件中调用（或者自定义 Hooks\n \xe2\x80\x94 也只能从 React 组件中调用）。\n 有一个与每个组件关联的\n\n \xe2\x80\x9c 内存单元\xe2\x80\x9d 内部列表。\n 它们\xe2\x80\x99 只是 JavaScript 对象，我们可以在其中放置一些数据。当您调用像 useState() 这样的 Hook 时，它会读取当前单元格（或在第一次渲染期间初始化它），然后将指针移动到下一个单元格。这就是多个 useState() 调用各自获得独立的本地状态的方式。

\n

首先……这个“记忆细胞”是什么？我们可以自己打印出来看看它的价值吗？

其次，该函数只有一个Counter()实例（如下例所示）。<Counter />因此，如果我们在 DOM 中渲染两次，一次为 to <div id="root1">，第二次为 to <div id="root2">，函数如何Counter()知道哪个是哪个？

function Counter() {\n\n    let [count, setCount] = React.useState(0);\n\n    return (\n        <div>\n            <button onClick={() => setCount(count + 1)}> + </button>                    \n …

我正在创建一个工作完全正常的聊天应用程序，除了一个问题：当我调用传递给子组件的函数时，它使用状态变量的初始值，而不是其当前值。我包含了下面的代码以及显示它使用错误值的日志片段。它为什么要这样做？与LioWebRTC有关吗？请指教。

注意：我添加了一个额外的按钮来调用相同的函数，并且当前状态确实会打印出来，所以看起来这与 LioWebRTC 有关？它怎么可能不使用当前状态呢？

import React, { useState, useEffect } from 'react';
import { LioWebRTC } from 'react-liowebrtc';
import ChatBox from './ChatBox';


const ChatWrapper = props => {

  const [counter, setCounter] = useState(0)

  console.log("Correct Counter:", counter)

  useEffect( () => {
    setCounter(counter => counter +1 );
  } , [] );

  const addChat = (name, message, alert = false) => {};

  const join = (webrtc) => webrtc.joinRoom(props.roomID.toString());

  const handleCreatedPeer = (webrtc, peer) => {
    setCounter(counter => counter +1 …

我正在将我的 React 项目转换为 Typescript。

我有这样的状态：

AdminBlogPostContainer.tsx

const [blogPost,setBlogPost] = useState<null | BLOGPOST>(null);

return(
  <AdminBlogPostPage
    blogPost={blogPost as BLOGPOST}
    setBlogPost={setBlogPost}
  />
);

AdminBlogPostPage.tsx

interface AdminBlogPostPage {
  blogPost: BLOGPOST,
  setBlogPost:            // <---- WHAT SHOULD I USE AS TYPE HERE ?
}

const AdminBlogPostPage: React.FC<AdminBlogPostPage> = (props) => {
  console.log("Rendering AdminBlogPostPage...");

  return(
    // ...
  );
};

export default AdminBlogPostPage;

这是错误消息：

我刚刚开始使用 TypeScript，所以请记住。我正在尝试在 React/TS 中实现一个简单的文件上传。一般来说，我认为我不理解如何初始化对象（例如在 useState 中）并正确处理可能性。例如，考虑以下代码，当用户单击“上传”按钮时，我正在运行一个函数，并且我尝试从状态读取文件并将其放入 formData 以将其发送到我的 api 端点）：

const [fileSelected, setFileSelected] = React.useState<File>() // also tried <string | Blob>

const handleImageChange = function (e: React.ChangeEvent<HTMLInputElement>) {
    const fileList = e.target.files;

    if (!fileList) return;
    
    setFileSelected(fileList[0]);
  };

   const uploadFile = function (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) {
    const formData = new FormData();
    formData.append("image", fileSelected, fileSelected.name);

     // line above ^ gives me the error below
  };
}

'string | 类型的参数 斑点| undefined' 不可分配给类型为 'string | 的参数 布洛布。类型“undefined”不可分配给类型“string |” 斑点'.ts(2345)

你应该如何在 useState 中初始化你的对象？如果你不初始化，就像这里一样，你是否必须不断检查 null …

我使用了带有useState和useEffect的react.js Hooks，当我向下滚动并且屏幕向下时，标题在250像素后隐藏。现在我想知道如何在向上滚动时使用 React Hooks 显示标题。

const Navbar = () => {
  const [show, setShow] = useState(false)
  const controlNavbar = () => {
      if (window.scrollY > 250 ) {
          setShow(true)
      }else{
        setShow(false)
      }
  }

  useEffect(() => {
      window.addEventListener('scroll', controlNavbar)
      return () => {
          window.removeEventListener('scroll', controlNavbar)
      }
  }, [])

和标题：

 <header className={`active ${show && 'hidden'}`}></header>

CSS：

.active{
    height: 4rem;
    width: 100%;
    position: fixed;
    top: 0px;
    transition: 0.3s linear;
    display: flex;
    justify-content:stretch;
    align-items: center;
    background-color: #FFFFFF;
    border-bottom: 1px solid rgba(0, 0, 0, .1); …

我正在使用MUI库来创建我的React Js应用程序。

在这里，我使用受控文本字段组件来创建一个简单的搜索 UI。

但有一点奇怪。组件Text Field在其值更改后失去焦点。 这是我第一次遇到这个问题。我以前从未遇到过这个问题。

怎么会发生这种事？以及解决办法是什么。

这是代码和游乐场： https: //codesandbox.io/s/mui-autocomplete-lost-focus-oenoo？

breakpoint type注意：如果我从代码中删除，Text Field组件在其值更改后仍然会失去焦点。

import React, { useState} from "react";
import ReactDOM from "react-dom";

function App() {
  const [count, setCount] = useState(0);

  function handleAlertClick(){
    return (setTimeout(() => {
  alert("You clicked on: " + count);
}, 3000))
  }


  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <button onClick={handleAlertClick}>Show alert</button>
    </div>
  );
}

我只想知道这是否像我认为的那样有效，或者是否有更好的解释！

每当setState调用该方法时，状态都会获得一个新的引用。这意味着原始状态没有新值，而是我们用新值创建了一个新状态。当我们点击第二个按钮时，事件处理函数捕获原始状态的引用。即使我们多次单击第一个按钮，当显示警报时，它也会显示事件处理程序捕获其引用的状态值。

这样对吗？

我想知道，当你有两个发生了什么props，并useState在一个组件。

我写了一个小例子，它有一个父组件用另一个子组件打印它的数字 -

const MyNumbers = (props) => {
  const [numbers, setNumbers] = useState([...props.arr]);

  function changeNumbers() {
    setNumbers((nums) => [...nums.map(() => Math.floor(Math.random() * 10))]);
  }

  return (
    <div className="MyNumbers">
      <div>
        <button onClick={changeNumbers}>Chane numbers</button>
      </div>
      <div>
        {numbers.map((num, idx) => (
          <SingleNumber key={idx} num={num}></SingleNumber>
        ))}
      </div>
    </div>
  );
};

const SingleNumber = (props) => {
  const [num] = useState(props.num);
  useEffect(() => {
    console.log("useEffect called");
  });
  return <h3>The number is {num}</h3>;
};

这是上面的演示

该SingleNumber组件使用useState并且如您所见，单击“更改数字”操作不会更改子组件中的值。

但是，当我编写几乎相同的代码但现在 …