Как использовать возвращаемое значение функции как состояние в React?

Question

Я изучаю функциональные компоненты с помощью React, и у меня есть простой код, который возвращает «Нет», когда значение состояния равно 0.

Проблема в том, что это не работает во время рендеринга. Почему?

import React, { useState } from "react";
import { Button } from "react-bootstrap";
const Counter = () => {
  const [count, setCount] = useState(0);
  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>
      {this.formatCount()}
      <button>+</button>
    </div>
  );
};

export default Counter;

Answer 1

Проблемы,

1:

{this.formatCount()}

Вы находитесь в функциональном компоненте, а не в классе, поэтому this

2: (main) * 1009 не требуется * count === 0 ? setCount("Nah") : setCount(0); Он имеет рекурсию,
Первый count - это 0, который запускает setCount("Nah")
Затем, во втором рендере count не 0, который запускает setCount(0) И этот l oop ломает приложение
FIX используйте что-то вроде этого, const formatCount = () => { return count === 0 ? 'Nah' : count }

Answer 2

В вашем коде есть пара вещей, которые можно было бы сделать по-другому.

Во-первых, ваша функция 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;

Это приводит к обновлению count при рендеринге и автоматическому повторному рендерингу на экране при изменении.

Дополнительная информация о хуке useEffect() может находится здесь

Answer 3

Я думаю, ваш код должен иметь дело с числами, а не строками.