возникли проблемы с повторным рендерингом компонентов

Question

У меня есть 2 компонента (форма для ввода значений и компонент реагирующей таблицы для отображения введенных значений), которые я помещаю на панель инструментов.Когда я ввожу значения в форму, чтобы обновить хранилище избыточности, я вижу изменения из инструментов избыточности, однако компонент таблицы не обновляется, пока я не перехожу на другую страницу и не возвращаюсь.Кто-нибудь знает, что я делаю не так?

Вот мой редуктор.Я не верю, что я мутирую здесь.

Редуктор:

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

Answer 1

Я не уверен на 100%, но похоже, что у вас возникает следующая ошибка:

В вашем constructor вы делаете (ненужную) копию вашего реквизита в ваше состояние, которое вводитошибка и побеждает цель Redux:

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

Это приводит к тому, что ваши данные обновляются только при вызове вашего constructor, то есть когда ваш компонент монтируется (то есть вы перезагружаете страницу).

Вместо этого используйте ваши реквизиты непосредственно в качестве ваших данных.Redux заставит ваш компонент перерисовываться каждый раз при изменении состояния.