重新渲染后反应状态被重置

Question

我是 React 的新手，遇到更新功能组件状态的问题。

我有一个组件 TinderCards.js 如下所示，它基本上从上下文提供程序中获取对象列表，并为每个对象创建一个 TinderCard (https://www.npmjs.com/package/react-tinder-card) 这是应该在滑动时更新 count (onSwipe)。

但是，每次刷卡时，count 都会增加到 1，然后就不再增加了。

例如

Initial count value: 0

Swipe first card => count = 1

Swipe second card => count = 1 (should be 2)

Swipe third card => count = 1 (should be 3)

我曾尝试将 count 值作为组件状态的一部分和称为 ResultsContext.js 的全局上下文的一部分，但两者都会导致相同的行为。

注意 class test-btn 按钮的行为完全符合我在 onClick 的要求。但是，TinderCard 组件的 onSwipe 却没有，尽管它基本上是相同的代码，这让我抓狂。

TinderCards.js

import React, { useState, useEffect, useContext } from "react";
import TinderCard from "react-tinder-card";
import StocksContext from "./StocksContext";
import ResultsContext from "./ResultsContext";
import "./Tindercards.css";

function TinderCards(props) {
  // const [count, setCount] = useState(0);
  const { count, setCount } = useContext(ResultsContext);
  const { stocks, setStocks } = useContext(StocksContext);

  return (
    <div>
      <div className="tinderCards__cardContainer">
        <div>
          Count: {count}
          <button className="test-btn" onClick={() => setCount(count + 1)}>Increment</button>
        </div>
        <div className="main__container">
          {stocks.map((stock) => (
            <TinderCard
              onSwipe={() => setCount(count + 1)}
              className="swipe"
              key={stock.name}
              preventSwipe={["up", "down"]}
            >
              <div className="card">
                <div style={{ height: "100%" }}>
                  <img
                    src={stock.url}
                    style={{
                      objectFit: "contain",
                      height: "100%",
                      width: "100%",
                      backgroundColor: "white",
                    }}
                  />
                </div>
              </div>
              <h3 style={{ backgroundColor: "white" }}>${stock.name}</h3>
            </TinderCard>
          ))}
        </div>
      </div>
    </div>
  );
}

export default TinderCards;

感谢您的帮助！非常感谢！

Answer 1

onSwipe 处理程序中的每个 count 变量：

() => setCount(count + 1)

是一个闭包，它包含 count 在它们被渲染时的值 - 即 0。其中一个函数运行实际上并没有改变 [=12] 的值=] 变量 - 它只是触发 parent 组件的重新渲染。那些其他 children 仍然保留他们的 onSwipe 处理程序，该处理程序只是将计数设置为 2（呈现时 count 的值多 1）- 这就是您所看到的。

此处的简单解决方案是将 update function 传递给 setCount，而不是硬编码值：

onSwipe={() => setCount(prevCount => prevCount + 1)}

这将确保 count 状态的“最新值”始终被读取，并递增 1。

重新渲染后反应状态被重置

React state gets resetted after rerendering

javascript

reactjs

react-context

react-hooks

react-functional-component