标签: react-hooks

我正在尝试使用自定义挂钩来调用将用于多个组件和上下文的函数。但是，钩子永远不会更新上下文值，它始终是一个空数组，但在上下文中，用作上下文值的状态会被更新，并且在组件中会接收上下文值。这里发生了什么？

在我看来，上下文值没有被传递给钩子，但我不明白为什么。

这是我的代码示例：

语境：

import { createContext, useState, useEffect } from "react";
import useTest from "./useTest";

const TestContext = createContext({
  test: [],
  testContextFn: () => {}
});

export const TestProvider = ({ children }) => {
  const [testState, setTestState] = useState([]);

  const { testFn } = useTest();

  const testHandlerHandler = () => {
    const test = 1;
    setTestState((current) => [...current, test]);
    testFn();
  };

  const contextValue = {
    test: testState,
    testContextFn: testHandlerHandler
  };

  useEffect(() => {
    console.log("state: ", testState); // => …

总结问题：

我试图GET使请求获取单个用户的查询无效。由于有很多用户，我必须根据我的GET请求提供 2 个查询键，fetch-user并且id：

useQuery<User, AxiosError>(['fetch-user', id], () => fetchUser(id));  

每当我作为PATCH用户时，我想要使所述请求无效，否则将显示以前的（缓存的）值而不是更新的值。

fetch-user如何使具有特定键（在我的情况下）和 的附加键的查询无效id？

显示一些代码：

挂钩GET具有特定 id 的用户：

const fetchUser = (id: number): Promise<User> => {
  return axios.get(`/users/${id}`).then((resp) => resp.data);
};
export const useUserData = (id: number) => {
  return useQuery<User, AxiosError>(['fetch-user', id], () => fetchUser(id));
};

挂钩PATCH具有特定 id 的用户：

const patchUser = (id: number, body: PatchUser): Promise<User> => {
  return axios
    .patch(`/users/${id}`, body, …

我正在执行一项任务，需要一项一项更新待办事项列表。我正在选择一个待办事项列表，当我单击更新按钮时，它应该使用 forEach 循环逐个更新待办事项。如果选择待办事项，下面是列表

selectedTodos = [
{
todoID:630316783e09e69bda667e2e,
userID:630316783e09e69bda63dvft3,
completed:false
},
{
todoID:630316783e09e69bda667ssdw36,
userID:988765yk6783e09e69bda667e2e,
completed:false
},
{
todoID:630316783765gbjybda667e2e,
userID:630316783e09e69vfft567742,
completed:false
},
]

我正在使用forEach循环来迭代列表并逐一更新，如下所示

selectedTodos.forEach(async(todo)=>{

const {data} = await axios.put(API_URL+"/todo/"+ todo.todoID,{
completed:true
})
console.log(data)
})

这里的 async-await 不在循环内工作，但是当我单独更新它时，它正在工作。它不仅仅在forEach循环上工作。我没有一个端点可以一次更新所有内容。我需要循环遍历列表并一一更新。还有其他办法吗？

尝试将打字稿添加到自定义反应表单组件中，但无法消除我不知道如何修复的错误。TS7053：元素隐式具有“any”类型，因为“string”类型的表达式不能用于索引类型“{ username: string;” 电子邮件：字符串；密码：字符串；确认密码：字符串；}'。在类型“{ username: string;”上找不到带有“string”类型参数的索引签名 电子邮件：字符串；密码：字符串；确认密码：字符串；}'。

我确信某个地方有答案，但我无法将其调整为我的代码，也无法理解错误的基本原理。请帮助我理解

应用程序组件

import React, {useState} from 'react';
import s from './App.module.scss'
import Input from "./components/Input/Input";

function App() {
    const [values, setValues] = useState({
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
    });

    const inputs = [
        {
        id: "username",
        name: "UserName",
        type: "text",
        placeholder: "Username",
        },
        {
            id: "email",
            name: "Email",
            type: "text",
            placeholder: "@gmail.com",
        },
    ]

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setValues({...values, [e.target.name]: e.target.value});
    }

    return (
        <div className={s.app}>
            <form …

代码沙盒链接

我有两个组件，一个父组件和一个子组件。父组件将子组件的列表保存在状态中，并使用 map 方法渲染它。

家长：

import { useState } from "react";
import Child from "./Child";

export default function Parent(){
    const [counter, setCounter] = useState(0)
    const [childKey, setChildKey] = useState(0);
    const [children, setChildren] = useState([]);

    function addChild(){
        setChildren([...children, <Child counter={counter} index={childKey}/>]);
        setChildKey(childKey + 1);
    }

    return (
        <>
            <h2>The parent component</h2>
            <p>The counter is set to {counter}</p>
            <p><button onClick={() => {setCounter(counter + 1)}}>Increment</button></p>
            <p><button onClick={addChild}>Add child</button></p>

            {children.map((c, i) => {
                return (
                        <div key={i}>{c}</div>
                    );
            })}
            
        </>
    );
}

孩子：

export …

我现在正在尝试学习 React hooks，但 useState API 对我来说没有任何意义。

为什么我们要使用数组来表示一个值并使用该值的设置器？对于这个特定的设计选择有任何合乎逻辑的解释吗？