Reactjs 无法让redux组件重新渲染

我有两个组件：一个用于输入值的表单和一个用于显示我在仪表板上输入的值的react table组件。当我在表单中输入值以更新redux存储时，我可以看到redux工具的更改，但是，直到我转到其他页面并返回，表组件才会更新。有人知道我做错了什么吗

这是我的减速机。我不相信我在改变这里的状态

减速器：

const keysReducerDefaultState = [];

export default (state = keysReducerDefaultState, action) => {
  switch (action.type) {
    case 'ADD_KEYS': 
      return [
        ...state,
        action.keyPair
      ];
    case 'REMOVE_KEYS':
      return state.filter(({ name }) => {
        return name !== action.name;
      });
    default:
      return state;
  }
}

组成部分1

class KeysImportForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      // type validation
      name: "",
      publicKey: "",
      privateKey: "",
    };
    this.typeClick = this.typeClick.bind(this);
  }
  render() {
    const { classes } = this.props;
    return (
      // a form that takes in 3 fields, name, publickey and privatekey
    );
  }
}

const mapDispatchToProps = (dispatch) => ({
  addKeys: (keyPair) => dispatch(addKeys(keyPair))
});

export default withStyles(validationFormsStyle)(connect(undefined, mapDispatchToProps)(KeysImportForm));

构成部分2

class KeysTable extends React.Component {
  constructor(props) {
    super(props);
    const data = props.keys.map((prop, key) => {
      return {
        id: key,
        name: prop.name,
        publicKey: prop.publicKey,
        privateKey: prop.privateKey,
      };
    });
    this.state = {
      data
    };
  }
  render() {
    const { classes } = this.props;
    return (
      <GridContainer>
        <GridItem xs={12}>
          <Card>
            <CardHeader color="primary" icon>
              <CardIcon color="primary">
                <Assignment />
              </CardIcon>
              <h4 className={classes.cardIconTitle}>Key Pairs</h4>
            </CardHeader>
            <CardBody>
              <ReactTable
                data={this.state.data}
                filterable
                columns={[
                  {
                    Header: "Name",
                    accessor: "name",
                    minWidth: 10
                  },
                  {
                    Header: "Public Key",
                    accessor: "publicKey",
                    minWidth: 50
                  },
                  {
                    Header: "Private Key",
                    accessor: "privateKey",
                    minWidth: 50
                  },
                  {
                    Header: "Action",
                    accessor: "action",
                    minWidth: 10,
                    sortable: false,
                    filterable: false
                  }
                ]}
                defaultPageSize={10}
                showPaginationTop
                showPaginationBottom={false}
                className="-striped -highlight"
              />
            </CardBody>
          </Card>
        </GridItem>
      </GridContainer>
    );
  }
}

const mapDispathToProps = (dispatch, props) => ({
  removeKeys: (id) => dispatch(removeKeys(id))
});

const mapStateToProps = (state) => {
  return {
    keys: state.keys
  }
}

export default withStyles(styles)(connect(mapStateToProps, mapDispathToProps)(KeysTable));

仪表板

class Dashboard extends React.Component {
  state = {
    value: 0
  };
  handleChange = (event, value) => {
    this.setState({ value });
  };
  handleChangeIndex = index => {
    this.setState({ value: index });
  };
  render() {
    const { classes } = this.props;
    return (
      <div>
        <KeysImportForm/>
        <KeysTable/>
      </div>
    );
  }
}

Dashboard.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(dashboardStyle)(Dashboard);

---

我不是100%确定，但看起来您有以下错误：

在构造器中，您将道具复制到您的状态中，这会导致错误并破坏Redux的目的：

const data = props.keys.map((prop, key) => {
  return {
    id: key,
    name: prop.name,
    publicKey: prop.publicKey,
    privateKey: prop.privateKey,
  };
});

这会导致数据仅在调用构造函数时更新，也就是组件挂载时，即重新加载页面时

相反，直接使用道具作为数据。Redux将导致组件在每次状态更改时重新渲染