React函数式组件点击按钮显示NaN的原因及解决方案咨询

问题根源 #

• Props传递错误：Products组件映射Product时，错误传递了count={p.count}——你的状态数组里产品的计数字段是countt，而且Product组件接收的props也是countt，这导致countt值为undefined，useState初始值变成undefined，后续加减操作自然得到NaN。
• map回调未返回组件：products.map的回调里没有return组件，这会导致没有Product实例被渲染（你说代码能运行，大概率是笔漏了return，补上即可）。
• 状态更新未用函数式写法：原代码setCount(count +1)依赖当前渲染的count值，在复杂场景下可能因闭包导致状态更新异常，改用函数式更新更可靠。

修复后的代码 #

Products组件修正 #

import React, { useState } from "react";
import Product from "./product";

const Products = () => {
  const [products, setProducts] = useState([
    { id: 1, productName: "Laptop", countt: 2 },
    { id: 2, productName: "Phone", countt: 3 },
    { id: 3, productName: "Console", countt: 7 },
  ]);

  return (
    <>
      {products.map((p) => {
        // 修正props字段，用产品id作为key（比index更可靠），补上return
        return (
          <Product
            key={p.id}
            productName={p.productName}
            countt={p.countt}
          />
        );
      })}
    </>
  );
};

export default Products;

Product组件改用函数式状态更新 #

import React, { useState } from "react";

// 给countt加默认值，防止未传递时初始值为undefined
const Product = ({ countt = 0, productName, children }) => {
  const [count, setCount] = useState(countt);

  return (
    <>
      <span className="m-2 text-info">{productName}</span>
      <span className="m-2 badge bg-primary">{format()}</span>
      <button onClick={handleIncrement} className="m-2 btn btn-sm btn-success">
        +
      </button>
      <button onClick={handleDecrement} className="m-2 btn btn-sm btn-warning">
        -
      </button>
      <button className="m-2 btn btn-sm btn-danger">delete</button>
      <img
        src="https://picsum.photos/200"
        style={{ borderRadius: "50px" }}
        alt="产品图"
      />
      {children}
    </>
  );

  // 函数式更新，用prevCount获取最新状态，避免闭包问题
  function handleIncrement() {
    setCount((prevCount) => prevCount + 1);
  }

  function handleDecrement() {
    setCount((prevCount) => prevCount - 1);
  }

  function format() {
    return count === 0 ? "zero" : count;
  }
};

export default Product;

额外优化点 #

• 用产品的id作为key，比index更稳定，避免列表元素顺序变化时出现不必要的重新渲染。
• 给countt props设置默认值0，即使父组件漏传该props，也不会出现NaN问题。

内容的提问来源于stack exchange，提问作者Fateme rmz