相关疑难解决方法(0)

我正在尝试下面的useEffect示例:

useEffect(async () => {
    try {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
        const json = await response.json();
        setPosts(json.data.children.map(it => it.data));
    } catch (e) {
        console.error(e);
    }
}, []);

我在我的控制台中收到此警告.但我认为清理对于异步调用是可选的.我不知道为什么我会收到这个警告.链接沙箱的例子.https://codesandbox.io/s/24rj871r0p

我有一个通过Fabric.js使用大量HTML5画布的应用程序.该应用程序是在Angular 1.x 之上编写的,我计划将其迁移到React.我的应用程序允许编写文本和绘制线条,矩形和椭圆.还可以移动,放大,缩小,选择,剪切,复制和粘贴一个或多个这样的对象.也可以使用各种快捷方式缩放和平移画布.简而言之,我的应用程序充分利用了Fabric.js.

我找不到关于如何将Fabric.js与React一起使用的大量信息,所以我关注的是1.它是否可能没有重大修改,2.它是否有意义,或者我应该使用其他广泛的画布库对React有更好的支持？

我能找到的React + Fabric.js的唯一例子是react-komik,然而它比我的应用程序简单得多.我主要关心的是Fabric.js的事件处理和DOM操作,以及它们对React的影响.

似乎还有一个React的画布库,名为react-canvas,但与Fabric.js相比,它似乎缺少很多功能.

在React应用程序中使用Fabric.js时,我需要考虑什么(关于DOM操作,事件处理等)？

我正在学习有关如何使用钩子注册事件的Udemy课程，讲师给出了以下代码：

  const [userText, setUserText] = useState('');

  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${userText}${key}`);
    }
  };

  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress);

    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };
  });

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );

现在效果很好，但我不认为这是正确的方法。原因是，如果我理解正确，那么每次重新渲染时，事件都会每次都在注册和注销，而我根本不认为这样做是正确的方法。

所以我useEffect对下面的钩子做了一些修改

useEffect(() => {
  window.addEventListener('keydown', handleUserKeyPress);

  return () => {
    window.removeEventListener('keydown', handleUserKeyPress);
  };
}, []);

通过使用一个空数组作为第二个参数，使组件只运行一次效果，即模仿componentDidMount。当我尝试结果时，奇怪的是，在我键入的每个键上都没有附加，而是被覆盖了。

我期待 …

我正在尝试新的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>

谁能帮我摆脱这个警告

React Hook useEffect 缺少依赖项：“dispatch”。包含它或删除依赖项数组react-hooks/exhaustive-deps

这是我的代码

function Register(props) {
  const inusers=useSelector( (state) => {return state});
  const history=useHistory()
  const dispatch=useDispatch();
  // const formik = useFormikContext();


  useEffect( () => {
    dispatch(fetchUser())
  },[])

Run Code Online (Sandbox Code Playgroud)

根据官方 React 文档，componentDidMount在 hooks 中翻译为：

useEffect(() => {
 //code here 
},[])

所以假设我想在这个钩子中做一个 api 调用：

useEffect(() => {
 getActiveUser(); 
},[])

添加 eslint 规则后"react-hooks/exhaustive-deps"，这是一个 lint 错误。为了使其静音，我可以将getActiveUser函数放入数组中，一切正常。

但这是否与文档背道而驰？我的印象是数组检查道具更改。我还想指出 API 调用是在没有 prop/id 的情况下进行的，所以我可以理解必须做这样的事情的事实：

useEffect(() => {
 getActiveUser(someId); 
},[getActiveUser, someId])

那么这里发生了什么？加了Eslint规则，是不是Effect里面的数组不能再为空了？

useEffect我正在从hook进行 api 调用

function ChangePassword(props) {
    const token = props.match.params.token;

    const [state, setState] = useState({
        password: "",
        confirmPassword: "",
    });
    const [status, setStatus] = useState({
        loaded: false,
        auth: false,
    });

    useEffect(() => {
        let { auth } = status;

        axios
            .get(
                `http://localhost:2606/api/hostler/changepassword?token=${token}`
            )
            .then((res) => {
                console.log("res", res);
                auth = res.status === 202;
            })
            .then(() => setStatus({ auth, loaded: true }))
            .catch((err) => console.log("err", err));
    },[]);

    return (
        // code
    );
}

但反应发出警告

React Hook useEffect 缺少依赖项：“状态”和“令牌”。包含它们或删除依赖项数组react-hooks/exhaustive-deps

添加status …

我有一个与此非常相似的问题 -如何修复 React Hook useEffect 中缺少的依赖项。

有一个关键区别 - 我将一个 fetch 函数传递给要从useEffect调用的子组件，所以我不能简单地将该函数移动到效果的主体中。每次渲染都会重新创建 fetch 函数并导致无限循环。我还有其他本地组件状态想要触发效果。

我基本上有一个容器组件和一个演示组件。MyPage 是 MyGrid 的父级并设置所有 redux 状态：

const MyPage = () => {

  const dispatch = useDispatch();
  const items= useSelector(selectors.getItems);
  const fetching = useSelector(selectors.getFetching);
  const fetchItems = opts => dispatch(actions.fetchItems(opts));

  return (
    <>
      {fetching && <div>Loading...</div>}
      <h1>Items</h1>
      <MyGrid
        items={items}
        fetchItems={fetchItems}
        fetching={fetching}
      />
    </>
  );

}

const MyGrid = ({ fetchItems, items, fetching }) => {

  const [skip, setSkip] = useState(0);
  const take = 100; …

我正在尝试使用 React hooks 来记忆回调。此回调专门使用在对象上定义的函数。

const setValue = useCallback((value) => {
    field.setValue(key, value);
}, [field.setValue, key]);

这会触发 Eslint 规则react-hooks/exhaustive-deps。
它想让我进去[field, key]。

如果我将代码更改为以下内容，即使看起来等效，我也不会收到警告：

const { setValue: setFieldValue } = field;

const setValue = useCallback((value) => {
  setFieldValue(key, value);
}, [setFieldValue, key]);

为什么 Eslint 在第一个示例中警告我？
在这种情况下我可以安全地忽略它吗？

onChange当用户在输入字段中键入内容时，我试图消除事件的反跳。

我正在引用这些线程：

• 我怎样才能执行去抖操作？
• 使用去抖 onChange 处理程序设置输入值

我有以下代码片段，我尝试复制上面线程中提供的解决方案：

const handler = useCallback(debounce(setSearchQuery(value), 500), []);

useEffect(() => {
  document.addEventListener('keydown', handleDocumentKeyDown);
  handler(value);
  return () => document.removeEventListener('keydown', handleDocumentKeyDown);
}, [isOpen, handleDocumentKeyDown, handler, value]);

// ...

const handleChange = (event) => {
  setValue(event.target.value);
};

错误：

未捕获的类型错误：处理程序不是函数

当用户在输入字段中键入内容时，setSerachQuery()如何消除反跳？500ms