Question

我是ReactJS的新手，我对React函数有一些问题。我有一个简单的计数器，可根据您单击的按钮更改当前数字。除了检查最小值和最大值之外，它都工作正常。这是我的代码：

import React, { useState } from 'react';

export default function CounterFunction(props) {

  const {min, max} = props;
  const [cnt, setCnt] = useState(min);

  const decrease = () => {
    setCnt(set(cnt - 1));
  }

  const increase = () => {
    setCnt(set(cnt + 1));
  }

  let set = function(newCnt) {
    console.log("TCL: set -> newCnt", newCnt)
    let cnt = Math.min(Math.max(newCnt, min), max);
    setCnt(cnt);
  }

  return (
    <div>
      <button onClick={decrease}>Minus 1</button>
      <strong>{cnt}</strong>
      <button onClick={increase}>Plus 1</button>
    </div>
  )
}

这是App组件：

import React from 'react';
import MinMaxFunction from './carts/minmax';

export default function() {
  return (
    <div>
      <MinMaxFunction min={2} max={10} />
    </div>
  );
}

当我尝试增加或减少数字时，它变成NaN。任何帮助将不胜感激。

Answer 1

您的函数set返回undefined，因为那里没有return语句。并且您正在undefined中设置setCnt。
您不需要将set传递到setCnt中，因为您正在set内部使用setCnt。因此，将代码更改为：

const decrease = () => { set(cnt - 1); }

Answer 2

const decrease = () => {
  setCnt(set(cnt - 1));
}

const increase = () => {
  setCnt(set(cnt + 1));
}

let set = function(newCnt) {
  console.log("TCL: set -> newCnt", newCnt)
  let cnt = Math.min(Math.max(newCnt, min), max);
  return cnt;  // return
}

您只需从cnt返回set。

在set中，您将cnt设置为所需值，但因此未返回任何内容undefined。在decrease和increase中，您将cnt设置为返回set的值，即undefined，因此返回NaN。

做同一件事的替代方法：

const decrease = () => {
  set(cnt - 1); // call the set function, no need of setCnt here
}

const increase = () => {
  set(cnt + 1);
}

let set = function(newCnt) {
  console.log("TCL: set -> newCnt", newCnt)
  let cnt = Math.min(Math.max(newCnt, min), max);
  setCnt(cnt);  // set state just here
}

Answer 3

set函数应返回值为新数字的值。您没有使用return，因此计算机假定您未返回任何内容。因此，您需要做return cnt;

函数中的React useState方法无法按预期工作

3 个答案: