标签: react-hooks

我有一个在浏览器中监听自定义事件的特定需求，然后我有一个按钮可以打开一个弹出窗口。我目前正在使用 React Portal 打开另一个窗口（PopupWindow），但是当我在里面使用钩子时它不起作用 - 但如果我使用类就可以工作。通过工作，我的意思是，当窗口打开时，两者都显示其下方的 div，但带有钩子的 div 在事件数据刷新时将其擦除。要进行测试，请将窗口打开至少 5 秒钟。

我在 CodeSandbox 中有一个例子，但我也会在这里发布以防网站关闭或其他原因：

https://codesandbox.io/s/k20poxz2j7

下面的代码将无法运行，因为我不知道如何通过 react cdn 使 react hooks 工作，但您现在可以使用上面的链接对其进行测试

const { useState, useEffect } = React;
function getRandom(min, max) {
  const first = Math.ceil(min)
  const last = Math.floor(max)
  return Math.floor(Math.random() * (last - first + 1)) + first
}
function replaceWithRandom(someData) {
  let newData = {}
  for (let d in someData) {
    newData[d] = getRandom(someData[d], someData[d] + 500)
  }
  return newData
}

const PopupWindowWithHooks = props => …

这是这个问题的后续问题，最接近我的问题：

useEffect 中的无限循环

我正在创建一个小型 React.js 应用程序来研究该库。我收到此警告：

超出最大更新深度。当组件在 useEffect 中调用 setState 时会发生这种情况，但 useEffect 要么没有依赖项数组，要么依赖项之一在每次渲染时发生变化。

我有一个功能组件，其中有以下代码：

const propertiesMap2 = new Map([  //There is also propertiesMap1 which has the same structure
["TITLE4",
    {
        propertyValues: {
            myProperty10 : "myVal1",
            myProperty11 : "myVal2",
            myProperty12 : "myVal3",                                                            
        },
        isOpen: true
    }
],
["TITLE5",
    {
        propertyValues: {
            myProperty13 : "myVal4",
            myProperty14 : "myVal5",
            myProperty15 : "myVal6",                                                             
        },
        isOpen: true
    }
],
["TITLE6",
    {
        propertyValues:{
            myProperty16 : "myVal7",
            myProperty17 : "myVal8",
            myProperty18 : "myVal9",
        },
        isOpen: true
    } …

我正在重构以使用 Hooks，但遇到了一个非常令人困惑的问题

我有一个基本的功能组件，如下所示：

export const MakeComponent = props => {
  const { path, value, info, update } = props;

  const [val, setVal] = useState(value);
  console.log(value, val); // abc undefined

 return (...)
}

日志返回abc undefined- 即value在 props 中明确定义，但从返回的第一个参数useState(value)是undefined

只是为了测试钩子是否正常工作，我尝试useState("abc")并按abc预期记录。

我不知道我做错了什么 - 有什么想法吗？

反应版本： 16.8.6

编辑这里是父组件 - 就我所见，这里没有什么花哨的！

<MakeComponent
  path={key}
  value={item[key]}
  info={value}
  update={updateDiffs}
/>

我正在看一些关于 React Hooks 的教程，在教程中作者创建了一个useDropdown用于渲染可重用下拉列表的钩子。代码是这样的

import React, { useState } from "react";

const useDropdown = (label, defaultState, options) => {
  const [state, updateState] = useState(defaultState);
  const id = `use-dropdown-${label.replace(" ", "").toLowerCase()}`;
  const Dropdown = () => (
    <label htmlFor={id}>
      {label}
      <select
        id={id}
        value={state}
        onChange={e => updateState(e.target.value)}
        onBlur={e => updateState(e.target.value)}
        disabled={!options.length}
      >
        <option />
        {options.map(item => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </select>
    </label>
  );
  return [state, Dropdown, updateState];
};

export default useDropdown;

他在这样的组件中使用了它

import React, { useState, useEffect …

如何使用反应钩子并获取查询字符串值？

我使用的反应类： const id = this.props.match.params.id;

我有一个多步骤表单，我正在使用 react 来制作我正在使用的验证react-hook-form。

我已经完成了 90% 的事情，只是我面临的问题是获取动态的第二个表单数据。

我正在做的是

• 在我的第一个表单中，我有两个字段，当它们被填写（验证）时，我将转到下一个表单
• 在我的下一个表单中，我有两个输入字段，在添加按钮上，用户也可以添加多行字段，这些工作正常

问题

• 现在，当我在第二种形式中创建新字段时，我想验证它们，但不知道该怎么做。

我做了什么

在我的主要组件中，我这样做是为了验证

const forms = [
  {
    fields: ['desig', 'dept'],
    component: () => (
      <Pro register={register} errors={errors} defaultValues={defaultValues} />
    ),
  },
  {
    fields: [
      `userInfo[0].fname`, // here I am facing issue if I am statically putting 0,1 then it is validating that perticular form
      `userInfo[0].sirname`,
    ],
    component: () => (
      <Basic
        register={register}
        errors={errors}
        defaultValues={defaultValues}
        inputHolder={inputHolder}
        deleteRow={deleteRow}
        addRow={addRow}
      />
    ),
  },
];

单击提交时，我正在执行此操作

const handleSubmit = (e) => …

当在函数中使用 Zustand 从 API 获取状态时，useEffect最佳实践是什么？现在我使用它非常简单：

export interface ModeState{
  modes: Mode[];
  fetchModes: () => void;
}

export const useModeStore = create<ModeState>((set) => ({
  modes: [],
  fetchModes: async () => {
    const modes: AcquisitionMode[] = await API.get(`/acquisition-modes`);
    await set({ modes });
  },
}));

在组件渲染函数中：

  const modeStore = useModeStore()
  const modes = modeStore.modes
  
  useEffect(() => {
    modeStore.fetchModes()
  }, [])

然而，文档似乎暗示可以通过多种方式编写它，以提高性能，特别是当我的商店因更多值和获取函数而变得更加复杂时。每次 API 调用创建一个存储是最佳实践吗？使用切片来获取每个组件中您需要的存储部分？我应该以不同的方式使用商店吗useEffect？我在网上找不到关于如何使用商店的明确示例useEffect。该subscribe文档似乎不适用于您使用存储通过异步函数获取值的用例。

我不明白为什么当我使用setTimeout函数时我的react组件启动到无限的console.log.一切正常,但PC开始落后于地狱.有些人说超时功能会改变我的状态和rerender组件,设置新的计时器等等.现在我需要了解如何清除它是正确的.

export default function Loading() {
  // if data fetching is slow, after 1 sec i will show some loading animation
  const [showLoading, setShowLoading] = useState(true)
  let timer1 = setTimeout(() => setShowLoading(true), 1000)

  console.log('this message will render  every second')
  return 1
}

清除不同版本的代码无助于:

const [showLoading, setShowLoading] = useState(true)
  let timer1 = setTimeout(() => setShowLoading(true), 1000)
  useEffect(
    () => {
      return () => {
        clearTimeout(timer1)
      }
    },
    [showLoading]
  )

我正在尝试新的React Hooks的useEffectAPI,它似乎永远在无限循环中运行!我只希望回调useEffect运行一次.这是我的代码供参考:

单击"运行代码片段"以查看"Run useEffect"字符串无限地打印到控制台.

function Counter() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log('Run useEffect');
    setCount(100);
  });

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

ReactDOM.render(<Counter />, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

我想测试 api 调用和返回的数据，这些数据应该显示在我的功能组件中。我创建了执行 api 调用的 List 组件。我希望返回的数据显示在组件中，为此我使用了 useState 钩子。组件如下所示：

const List: FC<{}> = () => {
    const [data, setData] = useState<number>();
    const getData = (): Promise<any> => {
        return fetch('https://jsonplaceholder.typicode.com/todos/1');
    };

    React.useEffect(() => {
        const func = async () => {
            const data = await getData();
            const value = await data.json();
            setData(value.title);
        }
        func();
    }, [])

    return (
        <div>
            <div id="test">{data}</div>
        </div>
    )
}

我写了一个测试，其中我嘲笑了 fetch 方法。我检查 fetch 方法是否已被调用并且它确实发生了。不幸的是，我不知道如何测试响应返回的值。当我尝试 console.log 时，我只是得到 null，我想得到“示例文本”。我的猜测是我必须等待从 Promise 返回的这个值。不幸的是，尽管尝试使用行为和等待方法，但我不知道如何实现它。这是我的测试：

it('test', async () => {
    let …