相关疑难解决方法(0)

错误的React与事件侦听器挂钩行为

我正在玩React钩子并面临一个问题.当我尝试使用事件监听器处理的按钮来控制日志时,它显示错误的状态.

CodeSandbox: https ://codesandbox.io/s/lrxw1wr97m

  1. 点击"添加卡片"按钮2次
  2. 在第一张卡中,单击Button1并在控制台中看到有2张卡处于状态(正确行为)
  3. 在第一张卡片中,单击Button2(由事件监听器处理)并在控制台中看到状态中只有1张卡片(行为错误)

为什么它显示错误的状态?在第一张卡中,Button2应在控制台中显示2张卡.有任何想法吗?

import React, { useState, useContext, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const CardsContext = React.createContext();

const CardsProvider = props => {
  const [cards, setCards] = useState([]);

  const addCard = () => {
    const id = cards.length;
    setCards([...cards, { id: id, json: {} }]);
  };

  const handleCardClick = id => console.log(cards);
  const handleButtonClick = id => console.log(cards);

  return (
    <CardsContext.Provider
      value={{ cards, addCard, handleCardClick, handleButtonClick }}
    >
      {props.children} …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-hooks

20
推荐指数
4
解决办法
1万
查看次数

React Native:您的应用关闭时是否有回调函数?

我有一个setInterval,即使你关闭(不退出)应用程序也会继续运行.当我的应用程序关闭或设备进入休眠状态时,我想调用一个函数,以便清除setInterval.

javascript react-native

8
推荐指数
2
解决办法
3812
查看次数

标签 统计

javascript ×2

react-hooks ×1

react-native ×1

reactjs ×1