Redux操作不会在组件中触发

Question

我正在尝试在一个在后端创建axios请求的组件中运行一个动作函数。此函数（addList）在另一个组件中工作，但是当我尝试在另一个组件中使用它时，它不起作用。

这是addList不起作用的组件。在onRowAdd函数中调用addList。

import React, { useState } from "react";
import MaterialTable from "material-table";
import { addList } from '../../actions/profile';
import PropTypes from "prop-types";
import { connect } from "react-redux";

const ListTable = (list, {addList}) => {
  const l = list;

  const [data, setData] = useState(l.list.list);
  console.log(l.list.list);
  list = l.list.list;
  var listname = l.list.name;
  const handlebClick = (e) => {
    e.preventDefault();
    console.log({list});

  };

  return (
    <div className="list-table">
      <button onClick={e => handlebClick(e)}>Apply Sequence</button>
      <MaterialTable
        title={listname}
        columns={[
          { title: "User Name", field: "username" },
          {
            title: "Link",
            field: "link",
            initialEditValue: ""
          },
          { title: "Name", field: "name", initialEditValue: "" },
          { title: "Source", field: "source", initialEditValue: "" },
          { title: "Date Added", field: "dateAdded", type: "date" },
          { title: "Notes", field: "notes", initialEditValue: "" }
        ]}
        data={l.list.list}
        editable={{
          onRowAdd: newData =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  const d = data;
                  d.push(newData);
                  setData({ d });
                  console.log(data);
                  addList(data, l.list.name, true);

                  resolve();
                  //put request to change list
                }
                resolve();
              }, 1000);
            }),
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  const d = data;
                  //console.log(d, oldData);

                  const index = d.indexOf(oldData);
                  d[index] = newData;
                  setData({ d });
                  resolve();
                  //put request to change list
                }
                resolve();
              }, 1000);
            }),
          onRowDelete: oldData =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  let d = data;
                  console.log(d);

                  if (d.length > 0) {
                    const index = d.indexOf(oldData);
                    d.splice(index, 1);
                    setData({ d });
                  }

                  resolve();

                  //put request to change list
                }
                resolve();
              }, 1000);
            })
        }}
      />
    </div>
  );
};


ListTable.propTypes = {
  addList: PropTypes.func.isRequired
};

export default connect(
  null,
  { addList }
)(ListTable);

这是addList工作的组件。在提交按钮onclick中调用它。

import React, { Fragment, useState } from "react";
import { Link, withRouter } from "react-router-dom";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { addList } from "../../actions/profile";

function ListItem({ listitem, index }) {
  return <div className="listitem">Username: {listitem.username}</div>;
}
function ListForm({ addListItem }) {
  const [value, setValue] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    if (!value) return;
    addListItem(value);
    setValue("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        className="input"
        type="text"
        placeholder="* Username"
        name="username"
        value={value}
        onChange={e => setValue(e.target.value)}
        required
      />
    </form>
  );
}

const AddList = ({ addList }) => {
  const [list, setList] = useState([]);

  const addListItem = username => {
    const newListItems = [...list, { username }];
    setList(newListItems);
  };

  return (
    <Fragment>
      <h1 className="large text-primary">Add A List</h1>
      <p className="lead">
        <i className="fas fa-code-branch" /> Add a list of your followers'
        usernames
      </p>

      <div className="form">
        <div className="form-group" />

        <div className="list">
          {list.map((listitem, index) => (
            <ListItem key={index} index={index} listitem={listitem} />
          ))}
          <ListForm addListItem={addListItem} />
        </div>
        <input
          type="submit"
          className="btn btn-primary my-1"
          onClick={e => {
            e.preventDefault();
            console.log(list);
            const listname = prompt(
              "Please enter a name for the list",
              "List Name"
            );

            addList([{}], listname, false);
          }}
        />
        <Link className="btn btn-light my-1" to="/dashboard">
          Go Back
        </Link>
      </div>
    </Fragment>
  );
};

AddList.propTypes = {
  addList: PropTypes.func.isRequired
};

export default connect(
  null,
  { addList }
)(withRouter(AddList));

错误是未捕获的TypeError：addList不是函数