标签: use-state

useState 钩子很棒。我主要使用 useState 钩子来初始化某些状态，并将该函数传递给子组件来更改状态。但是，我意识到我开始在父页面组件中使用太多 useState 挂钩。这看起来和感觉都是错误的，因为我开始在父页面组件中拥有大约 6-10 个 useState 挂钩。
在不显示代码的情况下，是否有更好的方法来做到这一点？也许是更好的实践，或者更好的重构方式。
谢谢

我正在尝试使用 useState 反应挂钩，如下所示，

 const [showMore, setShowMore] = useState(false);
    function handleClick(){
        setShowMore(true);
    }

我将 WishlistItemCount 值传递给 WishlistItems 组件

const wishListItemCount = showMore ? itemsCount : 3;
   const contentMessageElement =
        <WishlistItems
            itemCount={wishListItemCount}
            wishlistId={data.id}
            items={items}/>

我使用以下按钮来更改状态

           <Button
                onClick={handleClick}
                className={classes.btnshowmore}>Show More
             </Button>

但是当我加载页面时出现错误

Storybook preview hooks can only be called inside decorators and story functions.

请帮忙

我的完整组件

import React,{ useCallback } from 'react';
import { useMutation } from '@apollo/client';

import {FormattedMessage, useIntl} from 'react-intl';
import {ChevronDown, ChevronUp, MoreHorizontal} from 'react-feather';
import {useWishlist} from '@magento/peregrine/lib/talons/WishlistPage/useWishlist'; …

我已经与这段代码斗争了好几天了，但我仍然没有得到正确的结果。

问题：我正在使用具有拖放区的表单。在提交处理程序中，我需要将图像的 url 保存在数组中，但它总是作为空数组返回。

声明图像数组：

const [images, setImages] = useState([]);

在这里，我获取图像的 url 并尝试将它们保存在数组中：

const handleSubmit = () => {

      files.forEach(async(file)=> {
          const bodyFormData = new FormData();
          bodyFormData.append('image', file);
          setLoadingUpload(true);
          try {
            const { data } = await Axios.post('/api/uploads', bodyFormData, {
              headers: {
                'Content-Type': 'multipart/form-data',
                Authorization: `Bearer ${userInfo.token}`,
              },
            });
            setImages([...images,data])
            setLoadingUpload(false);
          } catch (error) {
            setErrorUpload(error.message);
            setLoadingUpload(false);
          }
      })
  }

这里我有一个submitHandler函数，我在其中调用handleSubmit()：

const submitHandler = (e) => {

    e.preventDefault();
    handleSubmit();
   dispatch(
        createCard(
          name,
          images,
        )
      );
}

我知道这是因为它执行代码的顺序，但我找不到解决方案。提前非常感谢！！！！

我正在制作一个自定义下拉列表，允许在下拉列表中推送新项目。由于某种原因，useEffect 不会在状态更改时触发，但会在初始渲染时触发。我很确定我错过了一些小东西，但看不到它。当用户单击与“addNewOptionToTree”方法关联的按钮时，应推送新项目。然后，categoryList 应在下拉列表中显示新项目。控制台日志被触发并且新的 arr 出现......有什么想法吗？

以上返回：

    const [newOption, setNewOption] = useState('')

    const [categoryList, setCategoryList] = useState(["Calendars", "Meetings", "Apostrophes work!"])

    useEffect(() => {
        console.log("categoryList::::::::::::::::", categoryList)
      }, [categoryList]);
    
    
      function addNewOptionToTree() {
        console.log('category:', categoryList);
        console.log('newOption:', newOption);
        const categoryListArr = categoryList
        categoryListArr.push(newOption)
        setCategoryList(categoryListArr)
        console.log("category:", categoryListArr);
    
      }

在返回块中：

<div className='dropDownList'>
          <div className='listItem' key={'add-item-key'}>
            <Input
              type='text'
              label=''
              value={newOption}
              placeholder='Add New Category'
              onChange={val => setNewOption(val)}
            />
          <div className='icon-add-contain dropdown-add-btn' onClick={addNewOptionToTree}></div>
          </div>
          {
            categoryList.length > 0 &&
              categoryList.map((category, index) => (
                <div className='listItem' onClick={onOptionClicked(category)} key={'level1-'+index}>
                  {category}
                </div>
              )) …

我有一个问题，我不明白为什么钩子返回 undefined ：

import React, { useEffect, useState } from 'react';


function App(){

    const [globalVariable, setGlobalVariable] = useState();

  useEffect(()=>{

    const test = 5
    console.log(test) // return 5
    setGlobalVariable(test)
    console.log(globalVariable) // return undefined
    
    
    },[]);
  
  

  return (
    <div>
    </div>
  );
}

export default App;

我该怎么做才能直接为 globalVariable 设置新值？

在我的 React 应用程序中，我有一个自定义钩子，它useState在内部保存一个值，但自定义钩子本身不返回任何值。

如果其内部的值发生useState变化，这是否会导致调用此自定义挂钩的组件重新渲染？

我有这种形式的数据：

books = [{
    id: 1,
    name: "book-1",
    audiences: [
      {
        audienceId: 1,
        name: "Cat A",
        critics: [
          { id: 5, name: "Jack" },
          { id: 45, name: "Mike" },
          { id: 32, name: "Amanda" }
        ],
        readers: [
          { id: 11, fullName: "Mike Ross" },
          { id: 76, fullName: "Natalie J" },
          { id: 34, fullName: "Harvey Spectre" }
        ]
      }]

表格是嵌套的。对于每本书，都有评论家和读者，并且会根据 AudienceId 值呈现每种形式

<div className="App">
      {books.map((book, index) => (
        <div key={book.id}>
          <h1>Books {index + 1}</h1>
          {book.audiences.map((au) => ( …

我刚刚开始学习 React，并了解了 useState 钩子。我遇到了两种不同的方法来设置布尔数据的状态。那么这两种方法是否相同？如果不同，应该选择哪一种？

const [isChanged, setIsChanged] = useState<boolean>(false)
  
const onClick = () => {
    setIsChanged((prevState) => !prevState)  // Approach 1
    setIsChanged(!isChanged)  // Approach 2
}

正如标题所说，我设置的 localStorage 注册了对todoList数组所做的更改并JSON.stringify保存它；但是，每当我刷新页面时，数组都会返回默认[]状态。

const LOCAL_STORAGE_KEY = "task-list"

function TodoList() {
    const [todoList, setTodoList] = useState([]);

    useEffect(() => {
        const storedList = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
        if (storedList) {
            setTodoList(storedList);
        }
    }, []);
    
    useEffect(() => {
        localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todoList));
    }, [todoList]);

假设我有一个用于检查用户是否登录的基本设置：

import { createContext } from "react";
const UserContext = createContext<string | null>(null)
export default UserContext

在我的 App.tsx 中，我想创建一个 useState 挂钩，以便我可以管理整个应用程序中的上下文状态：

//Context
const [context, setContext] = useState<string | null>(null)

  <UserContext.Provider value={{context, setContext}}>

    <Routes>

      <Route path="/" element={<Home/>}/> 
      <Route path="/login" element={<Login/>}/> 
      <Route path="/register" element={<Register/>}/> 
      <Route path="/admin" element={<Admin/>}></Route>

    </Routes>  

  </UserContext.Provider>

因此，据我所知，我只需要登录用户的名称，或者如果我想拒绝访问某些页面，则将上下文的状态设置为空。现在的问题是打字稿在这里对我大喊大叫，特别是在 Provider 的值中：

Type '{ context: string | null; setContext: 
React.Dispatch<React.SetStateAction<string | null>>; }' is not assignable to type 'string'.ts(2322)

我可以强制转换该值，如下所示：

value={{context, setContext} as any}

但这似乎并不是一个特别优雅的“打字”解决方案。

任何帮助表示赞赏！