Как в useState передать динамический объект?

Question

[Teleweb developer]

Привет, изучаю React Native, делаю приложение список дел, есть такой код:

const keys = LocalStKeys();
let tasks = [];
for (let taskText of keys) {
    let ob = {text: taskText, key: Date.now()};
    tasks.push(ob);
}
const [list, setItem] = useState(tasks);
console.log(list)

Когда я пытался сделать такой код(при загрузки приложения вывести и загнать в стейт как начальные данные все сохранённые записи), то там почему то list всегда пустой, как это побороть?

Answer 1

[Семён Федосеев]

Вы не задействовали сеттер setItem для изменения состояния.
Изначально при рендере у Вас tasks пустой, поэтому list пустой.

const [list, setItem] = useState([]);

const keys = LocalStKeys();
let tasks = [];
for (let taskText of keys) {
    let ob = {text: taskText, key: Date.now()};
    tasks.push(ob);
}

setItem(tasks)

console.log(list)

Comments

[Teleweb developer]

Пробовал, но выдавало такое:

Too many re-renders. React limits the number of renders to prevent an infinite loop

[Семён Федосеев]

Teleweb developer, попробуйте использовать useEffect, чтобы избавиться от перерендера:

import React from 'react';

export function App() {
  const [list, setItem] = React.useState([]);
  let tasks = [];

  React.useEffect(() => {
  const keys = ["one", "two", "three"];
  for (let taskText of keys) {
      let ob = {text: taskText, key: Date.now()};
      tasks.push(ob);
  }
  setItem(tasks)
  }, [])

  React.useEffect(() => {
    console.log(tasks)
  }, [])

  return null;
}

[Teleweb developer]

Семён Федосеев, Rendered more hooks than during the previous render.

[Семён Федосеев]

Teleweb developer, возможно, ошибка происходит где-то в другой части Вашего кода. Пример реализации через хук useEffect на React 18 https://codesandbox.io/s/kak-v-usestate-peredat-di.... Код, который в комментарии Выше с ошибками, для демонстрации основной идеи. В CodeSandbox рабочая версия. Вы можете использовать подобный подход также для получения данных с сервера.

import { useState, useEffect } from "react";

export default function App() {
  const [tasks, setTasks] = useState(null);

  useEffect(() => {
    const keys = ["one", "two", "three"];
    const array = [];
    for (let taskText of keys) {
      let ob = { text: taskText, key: Date.now() };
      array.push(ob);
    }
    setTasks(array);
  }, []);

  useEffect(() => {
    if (tasks) {
      console.log(tasks);
    }
  }, [tasks]);

  return null;
}