Как вызвать функцию React в al oop без события?

Question

Код React: я пытаюсь использовать простой счетчик в al oop для подсчета каждого из моих элементов списка задач, но я не могу выполнить код в React. Мне просто нужно counttopen и countcomplete, чтобы заполнить и затем отобразить их на экране.

countopen и countcomplete оба установлены в состоянии, я думал, что это будет проще всего ...

App. js ...

    //I tried putting my code out in a separate block, then calling it but that doesn't work
    todos.map((todo, index) => {
    if (todo[index].completed === 0) {
        setCountopen(countopen + 1);
    } else {
        setCountcomplete(countcomplete + 1);
    }})
  }

    <div className="App">
        <div className="todo-list">
            {todos.map((todo, index) => (
              <Todo key={index} index={index} todo={todo} completeTodo={completeTodo} tallyTodos={tallyTodos} />

    //i tried putting my code here, no dice React throws syntax errors

        **if (todo[index].completed === 0) {
            setCountopen(countopen + 1);
        } else {
            setCountcomplete(countcomplete + 1);
        ))}**

            Open: {countopen} Closed: {countcomplete}
      </div>
    </div>
  );

Итак, я предполагаю, что ответ на вопрос таков: как мне написать свой код if / else для зацикливания в React? Я думал, что смогу прокрутить свою функцию .map, но нет. Мне просто нужно подсчитать 2 типа задач и отобразить их в {countopen} и {countcomplete}

Заранее спасибо!

Answer 1

Ваш ответ помог мне решить мою проблему: я пытался вычислить свои значения в l oop, когда ваше решение array.filter () добилось цели. Я добавил этот код

  const completedTodos = todos.filter(todo => todo.completed == 1);
  const openTodos = todos.length - completedTodos.length;

... и все заработало. Спасибо, господин Залевский!

Answer 2

Это производное состояние, и лучше не дублировать его в этом состоянии, так как оно подвержено десинхронизации со значением состояния источника. Вы должны вычислить его на лету в render или, если вычисления дороги, используйте стратегию кэширования, такую ​​как useMemo React hook .

Перед возвратом вы можете вычислить значения используя for l oop или вычислите длину отфильтрованного списка задач, который включает только завершенные элементы.

* countopen всегда представляет собой просто разницу между количеством задач и числом выполненных элементов - достаточно просто const.

См. пример ниже:

let countcomplete = 0;

for (const todo of todos) {
  if (todo.completed !== 0) {
    countcomplete++;
  }
}

// --or--

const completedTodos = todos.filter(todo => todo.completed !== 0);
countcomplete = completedTodos.length;

const countopen = todos.length - countcomplete;

return (
  <div className="App">
    <div className="todo-list">
      {todos.map((todo, index) => (
        <Todo key={index} index={index} todo={todo} completeTodo={completeTodo} tallyTodos={tallyTodos} />
      )}
      Open: {countopen} Closed: {countcomplete}
    </div>
  </div>
);