使用React+Redux+react-table渲染表格报Element type无效错误如何解决？

• react-table导入错误：你当前安装的react-table为v7及以上版本，该版本起不再提供默认导出的ReactTable组件，按你现有写法导入会拿到undefined，直接触发本次报错。如果你要保留现有组件式用法，先执行命令npm install react-table@6.8.6安装v6版本的react-table。
• Redux数据更新逻辑错误：你拉取到接口数据后，dispatch时没有携带返回的数据，reducer中也没有用新数据更新状态，同时初始posts值为字符串"null"，不是表格需要的数组格式，即使组件导入正常也无法正常渲染数据。
• useEffect缺少依赖数组：会导致组件每次渲染都重复发起接口请求，产生不必要的性能消耗。

修复后的Store.js代码 #

import { createStore } from "redux";

const postsReducer = (state = { posts: [] }, action) => {
  if (action.type === "save") {
    return {
      posts: action.payload
    };
  }
  return state;
};

const store = createStore(postsReducer);

export default store;

修复后的App.js代码 #

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { useEffect } from "react";
import ReactTable from "react-table";
// 导入react-table必备样式
import "react-table/react-table.css"

function App() {
  const dispatch = useDispatch();
  const postsData = useSelector((state) => state.posts);

  useEffect(() => {
    fetch("http://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => {
        // 将接口返回数据通过payload传给reducer
        dispatch({ type: "save", payload: data });
      })
      .catch(console.log);
  // 加空依赖数组，仅组件挂载时发起一次请求
  }, []);

  const columns = [
    {
      Header: "USER ID",
      accessor: "userId",
    },
    {
      Header: "ID",
      accessor: "id",
    },
    {
      Header: "Title",
      accessor: "title",
    },
    {
      Header: "Body",
      accessor: "body",
    },
  ];
  return (
    <div>
      <ReactTable data={postsData} columns={columns} />
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者user14848180