Javascript 如何在React中将函数返回值用作状态？

我正在学习React的功能组件，我有一个简单的代码，当状态值为0时返回'Nah'

问题是，这在渲染期间不起作用。为什么呢

import React，{useState}来自“React”；
从“react bootstrap”导入{Button}；
常量计数器=（）=>{
const[count，setCount]=useState（0）；
常量formatCount=（）=>{
计数===0？设置计数（“Nah”）：设置计数（0）；
};
//让classes=“badge m-2”；
//classes+=（this.state.count==0）？“徽章警告”：“徽章主要”；
返回(
-
{this.formatCount（）}
+
);
};
导出默认计数器；

我认为您的代码应该处理数字而不是字符串。

问题

1: 您所处的是功能组件而非类，因此不需要

此

2：（主要） 它具有递归性，
第一个

count

是

0

，它触发

setCount（“Nah”）

然后，在第二次渲染中，

count

不是

0

，这将触发

setCount（0）

这个循环会破坏应用程序

修理 用这样的东西

const formatCount = () => {
    return count === 0 ? 'Nah' : count
}

---

您的代码中有两件事情可以做得不同

首先，函数

formatCount（）

不返回值。所以在执行它时几乎没有什么可显示的

其次，在状态更新值之前执行函数，使其始终保持

0

更好的方法是：

import React, { useState, useEffect } from "react";
import { Button } from "react-bootstrap";
const Counter = () => {
  const [count, setCount] = useState(0);

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

  const formatCount = () => {
    count === 0 ? setCount("Nah") : setCount(0);
  };

  // let classes = "badge m-2";
  // classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";

  return (
    <div>
      <Button className="badge badge-warning m-2">-</Button>
      {count}
      <button>+</button>
    </div>
  );
};

export default Counter;

import React，{useState，useffect}来自“React”；
从“react bootstrap”导入{Button}；
常量计数器=（）=>{
const[count，setCount]=useState（0）；
useffect（（）=>{
formatCount（）；
}, []);
常量formatCount=（）=>{
计数===0？设置计数（“Nah”）：设置计数（0）；
};
//让classes=“badge m-2”；
//classes+=（this.state.count==0）？“徽章警告”：“徽章主要”；
返回(
-
{count}
+
);
};
导出默认计数器；

这会导致

计数在渲染时更新，并在更改时自动重新渲染到屏幕

关于
useffect（）
hook的更多信息，可以在这里找到
我也是个新手，但无论如何。您的
计数最初为0。现在，如果您呈现html标记（实际上是JSX），您将执行函数，因为末尾的括号是
（）
。您的函数现在检查count是否为
0
，是否为true。现在
setCount（）
将计数变量更改为
nah
Noo。。因为我将状态更改为“0”，所以它也不工作..那么
useffect
做什么呢？我认为它用于跟踪某个变量是否根据it@jenny增加了结帐now@Ifaruki什么！！你在问题中的
useffect
哪里找到的？？？@aXuser264不在问题中，我只是问一下。嗨，克里斯，谢谢你的帮助！但是为什么formatCount不返回值。。。？？我认为arrow函数返回值时不返回。。。。是吗？@jenny这是真的，但是
setCount（）
没有返回值。检索该值的唯一方法是返回
count
或在JSX中使用它render@jenny请记住，如果不打开方括号，则arrow函数仅返回值；如果打开方括号，则arrow函数在未显式调用return的情况下不会返回值。
const formatCount = () => {
    return count === 0 ? 'Nah' : count
}

import React, { useState, useEffect } from "react";
import { Button } from "react-bootstrap";
const Counter = () => {
  const [count, setCount] = useState(0);

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

  const formatCount = () => {
    count === 0 ? setCount("Nah") : setCount(0);
  };

  // let classes = "badge m-2";
  // classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";

  return (
    <div>
      <Button className="badge badge-warning m-2">-</Button>
      {count}
      <button>+</button>
    </div>
  );
};

export default Counter;