如何获取和重新渲染组件答案

【问题标题】：How to fetch and rerender the component如何获取和重新渲染组件
【发布时间】：2020-06-17 12:44:43
【问题描述】：

请告诉我如何使用 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

提前致谢

【问题讨论】：

这个<table data=accData />应该是<table data={accData} />
不相关，但我看不出有任何理由将 loadData 包装在一个额外的匿名函数中。
你能分享console.log(data)吗？无论如何你不需要映射它，只是为了传播它 - setAccData(prev => [...prev, ...data])
如果我只是传播它，我会得到 TypeError: data is not iterable
你这样做完全错了，要推送新数组，而不是一个一个推送，只需像const data = await response.json(); setAcc([...accData, ...data.content])那样做一次。

标签： reactjs react-hooks

【解决方案1】：

这是sandbox中的解决方案

// 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;

【讨论】：