Как получить и повторно отрендерить компонент - PullRequest
Новая
       1

Как получить и повторно отрендерить компонент

0 голосов
/ 17 июня 2020

Подскажите, пожалуйста, как получить новые данные в массив с помощью useState. Каждый раз, когда используется useEffect, массив снова инициализируется пустым. Мне нужно передать этот массив в таблицу, чтобы при изменении значений таблица снова отображалась 

const AccountContainer = () => {
  let [isLoaded, setIsLoaded] = useState(false);
  let [page, setPage] = useState(0);
  let [accData, setAccData] = useState([]);
  useEffect(() => {loadData()}, [page]);

  const loadData = async () => {
    const response = await fetch(API_URL);
    const data = await response.json();
     data.content.map(acc => {     
       setAccData([...accData, acc])
    });

    setIsLoaded(true);
  };


 return (
          <table data={accData} />
 )
};

export default AccountContainer;

добавлено журнал 

[]          AccountContainer.js:30
[]          AccountContainer.js:30
[]          AccountContainer.js:30
[]          AccountContainer.js:30
[]          AccountContainer.js:30
[]          AccountContainer.js:30

https://codesandbox.io/embed/great-rubin-poywh?fontsize=14&hidenavigation=1&theme=dark

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

1 Ответ

1 голос
/ 17 июня 2020

вот решение в песочнице 

// AccountList.jsx
import React from "react";

const AccountList = props => (
  <div>
    {console.warn(props)}
    {props.dataAcc.map(acc => (
      <div>{acc.email}</div>
    ))}
    )
  </div>
);

export default AccountList;

App.jsx 

import React, { useState, useEffect } from "react";
import AccountList from "./AccountList";
import "./styles.css";

const AccountContainer = () => {
  let [isLoaded, setIsLoaded] = useState(false);
  let [page, setPage] = useState(0);
  let [accData, setAccData] = useState([]);
  const API_URL = `https://reqres.in/api/users?page=1`;

  useEffect(() => {
    loadData();
  }, [page]);

  const loadData = async () => {
    const response = await fetch(API_URL);
    const data = await response.json();
    setAccData([...accData, ...data.data]);
    setIsLoaded(true);
  };

  const renderTable = () => {
    if (isLoaded) {
      return (
        <div>
          {console.warn(accData)}
          <AccountList dataAcc={accData} />
        </div>
      );
    } else if (!isLoaded) return "Loading";
  };

  return renderTable();
};

export default AccountContainer;
...