标签: react-hooks

我想显示来自 React 的数组列表，但当我认为我做的一切都正确时它没有显示？请问我哪里错了

下面是代码

import { useState } from 'react';

function App() {
   
  const [items , setItems] = useState([{
       id:1,
       text:'simple 1'
  },
  {
    id:1,
       text:'simple 2'
  },
  {
    id:1,
    text:'simple 3'
  },

])

  return (
    <div className="App">
    
    {items.map((item) => (
      <h1>{items.text}</h1>
    ))}


     <h1>Hello from React js</h1>
    </div>
  );
}

export default App;

tl;dr - 如何通过跟踪强制重新渲染仅一个特定的子组件ref？

我有一个行表。我希望能够将鼠标悬停在行上并显示/隐藏行中的单元格，但只能在一段时间之后。

您只能在将鼠标悬停在整个表格上一段时间后（由onMouseEnter和触发）才能显示隐藏的悬停内容onMouseLeave。

一旦将鼠标悬停在特定的 上<Row>，如果父级允许，它应该显示额外的内容。

鼠标悬停在表格上的顺序：

1. 将鼠标悬停在行上
2. 行isHovered现在是true
3. 在 1000ms 内，allowHover更改为true
4. 由于allowHover和isHovered都是true，显示额外的行内容

鼠标移出表格的顺序：

1. 鼠标移动到父容器/表/行之外
2. 之前悬停的行isHovered设置为false
3. 先前悬停的行的隐藏内容被隐藏
4. 在 1000ms 内，allowHover更改为false

此时，如果重新进入表，我们必须再次等待1秒才为allowHover真。一旦 和 都isHovered为allowHover真，则显示隐藏内容。一旦允许悬停，就不会有任何延迟：悬停在其上的行应立即显示隐藏的内容。

我试图useRef避免改变行父行的状态并导致所有子行的重新渲染

在行级别，悬停时，行应该能够检查是否允许悬停，而无需使用 props 重新渲染整个列表。我假设useEffect可以设置为跟踪该值，但它似乎不会在单个组件级别触发重新渲染。

换句话说，预期的行为是当前悬停在行上的行检测父级中的更改，并且仅重新渲染自身以显示内容。然后，一旦允许悬停，行为就很简单。将鼠标悬停在行上？揭示其内容。

以下是涉及的代码片段：

function Table() {
  const allowHover = useRef(false);

  const onMouseEnter = (e) => …

我仍然无法理解 Hooks。我经常遇到它抱怨我正在做的问题Invalid hook call。
这次，是尝试useMutation在自定义挂钩中使用 Apollo 的挂钩时。
如果有人能告诉我我做错了什么，我将不胜感激。

组件（我在其中调用自定义挂钩）

export default function MyComponent() {

    const { loading, error, data } = useQuery( GET_ORDERS );

    const setOrdersInMetafields = ( orders: Array<OrderModel> ) => {
        metafieldResp = useSetMetafields( { customerId, value: orders, field: 'duplicateOrders' } );
    }

    @useEffect( () => {
        setOrdersInMetafields( orders );
    }, [ orders ] );
}

定制挂钩

export const useSetMetafields( { customerId, value, field }, { customerId: string, value: any, field: string } ) …

我有一个用于从服务器获取数据的自定义挂钩。它有3个参数，分别是pageNumber、pageSize和keyword。据我所知，如果我设置一个或多个这些参数，挂钩就会以新状态重新触发。但是在我的组件中，有一个地方当我创建数据时，所以一旦创建它就必须再次获取数据。但其参数（如 pageNumber、pageSize 和 keywords）均未更新。我只需要它再次运行以获取新数据。在不改变状态的情况下，我该如何做到这一点？（在下面的代码中，“Adapter”是一个 Axios 实例）

这是钩子：

const useFetchLists = (
  url = '',
  currentPage = 1,
  selectedPageSize = 10,
  keyword = ''
) => {
  const [items, setItems] = useState([]);
  const [loading, setloading] = useState(false);
  const [totalPage, setTotalPage] = useState(1);
  const [totalItemCount, setTotalItemCount] = useState(0);

  useEffect(() => {
    const fetchListData = async () => {
      try {
        setloading(true);
        await Adapter.get(
          `${url}?pageNumber=${currentPage}&pageSize=${selectedPageSize}&keyword=${keyword}`,
          {}
        ).then((response) => {
          setItems(response.data.items);
          setTotalPage(response.data.totalPages);
          setTotalItemCount(response.data.totalItems);
        });
      } catch (err) {
      } finally {
        setloading(false);
      }
    }; …

我想编写 1 个将在不同功能组件中使用的通用函数。

这个通用函数使用钩子，我收到错误：Error: Invalid hook call. Hooks can only be called inside the body of a functional component.

我的代码示例：

应用程序.js

import React from 'react';
import {
    Text,
    TouchableOpacity,
} from 'react-native';
import { Change } from 'static/Change';

export default function App() {
    return (
        <TouchableOpacity
            onPress={() => { 
                Change();
            }}
        >
            <Text>Click Me!</Text>
        </TouchableOpacity>
    );
}

变更.js

import React from 'react';

export const Change = () => {
    const [State, setState] = React.useState(0);

    // Other hook work.
    // …

您好，感谢您的帮助，在反应中使用以下代码，我想在每次单击按钮时复制单击按钮。目前没有任何反应，但如果控制台显示数组增长。这里是沙箱：

https://codesandbox.io/s/charming-glitter-0ntxmj?file=/src/App.js

const { useEffect, useState } = React;

function App() {
  const btn = [
    <button
      onClick={() => {
        btn.push(btn[0]);
        console.log(btn);
      }}
    >
      Click
    </button>
  ];

  /*  useEffect(()=>{
btn
  },[btn])*/

  return (
    <div className="App">
      <div>
        {btn.map((e) => {
          return e;
        })}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

嗨，我正在学习 React，当我制作这个例子时，我感到有些好奇。这段代码就是向newsapi发送get请求，并接收结果。我使用了自定义钩子。

// *** this is where I use custom hook. "usePromise" is custom hook. *** //
function NewsList({ category }) {
  const [loading, response, error] = usePromise(() => {
    console.log("how many will it run?")
    const query = category === 'all' ? '' : `&category=${category}`;
    return axios.get(
      `https://newsapi.org/v2/top-headlines?country=kr${query}&apiKey=044c3c345f28417380cd3ea946ac8641`
    );
  },[category]); 

  console.log(loading);

...

我写了 console.log("how much will it run?") 来检查这个函数将运行多少个。还有console.log(loading)来检查加载将被更改的次数

// *** this is custom hook's code *** //
export default function usePromise(promiseCreator, deps) {
  const [loading, setLoading] = …

我是一名自学成才的开发人员，几乎完全使用原生 iOS 应用程序。对于我的一个项目，我聘请了一名 Web 开发人员来构建 React Web 应用程序（由 Firebase 托管）。他来自乌克兰，突然不得不停下来，所以我接手来完成它。因此，我无法以传统方式学习 React/HTTPS/axios/Node.js，即通过教程、练习、核心概念等缓慢学习。尽管几个月前，我还是能够完成它，一切都很好。然而，在过去的几周里，我不得不重构我的整个架构，包括创建一个新的 GCP 项目、一个新的 Firebase 项目、新的 git 存储库等，其中包括除了一些代码优化和数据模型之外的所有重新配置调整。正是在这次重组的某个时刻，我的问题出现了。我提到这一切是为了指出A)我一直严重依赖他的原创工作，尤其是在设置 Firebase Hosting 方面，B)我不太确定问题出在哪里。我 90% 确定它是用 React 实现的，但这很奇怪，因为从两个月前完成它开始，我并没有真正对异步网络调用进行任何更改，而且它按预期工作。

无论如何，在出现时，Web 应用程序请求向客户端呈现哪个视图，该视图是NotFoundView、 aReviewUserView或UserProfileView，由给定 a 的后端确定userId。问题是当UserProfileView显示时，某些原因会导致该视图无限地重新渲染。首先，在不超过两秒的时间内，它会正确显示此视图，然后非常快速地重置和重新渲染。useEffect我认为它与和/或React 钩子有关useState，尽管我不确定在哪个视图中。

非常感谢任何帮助，谢谢。

export enum ViewState { 
    UserProfile = 'UserProfile',
    ReviewForm = 'ReviewForm',
    NotFound = 'NotFound'
}

....................................................

export class ApiHandler { 
    // Returns a ViewState enum case for main view routing
    public static …

我正在尝试使用a react-router，在使用该库后开始出现一些问题，我已经尝试编写不同的代码，我在互联网上找到了现成的代码，但仍然出现问题（甚至重置Windows）。这段代码取自官方的react-router文档，按照所写的进行了所有操作（https://reactrouter.com/docs/en/v6/getting-started/installation），这是错误：

警告：无效的挂钩调用。钩子只能在函数组件的主体内部调用。>出现这种情况可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本，请参阅https://reactjs.org/link/invalid-hook-call了解有关如何调试和解决此问题的提示。printWarning@react.development.js:207

未捕获的类型错误：无法读取 null 的属性（读取“useRef”）

在 useRef (react.development.js:1628:1)

在 BrowserRouter (index.tsx:151:1)

在 renderWithHooks (react-dom.development.js:16175:1)

在 mountInminatedComponent (react-dom.development.js:20913:1)

在开始工作（react-dom.development.js：22416：1）

在 HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)

在 Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)

在 invokeGuardedCallback (react-dom.development.js:4274:1)

在 beginWork$1 (react-dom.development.js:27405:1)

在 PerformUnitOfWork (react-dom.development.js:26513:1)

组件中出现上述错误：

在 BrowserRouter (http://localhost:3001/static/js/bundle.js:45400:5)

考虑向树添加错误边界以自​​定义错误处理行为。访问https://reactjs.org/link/error-boundaries了解有关错误边界的更多信息。logCapturedError @react-dom.development.js:18572

4 个错误invalid hooks、 3 个错误 和Uncaught TypeError: Cannot read properties of null (reading 'useRef')出现The above error occurred …

我正在学习反应。需要一些帮助才能理解这一点。

我有两个按钮。一个是“添加随机文本”，另一个是“删除”。

对于添加按钮，我用来Math.random生成数字并添加一些文本。

我想通过映射来显示列表项。当单击删除按钮时，最后一个项目将被删除。

我尝试过pop()，但只显示已删除的那个。我怎样才能保留整个列表并删除最后一个？

const [data, setData]=useState([]);
let addHandler =()=>{
//Newdata is Math.random()*100+some text
setData([...data, newdata])
}
let removeHandler=()=>{

}