как создать действие onClick в моем компоненте react + Redux

Я прошел через множество учебных пособий и вопросов по стеку, но я не могу найти решение. Я просто изучаю React / redux, пытаясь построить действие OnClick. У меня есть следующая ошибка "Maximum call stack size exceeded error". Я получил это, потому что я рендеринг функции, которая бесконечно меняет мое состояние. Я пытаюсь разобраться со своим <button onClick={DisplayTable(click)}>cool</button> по-другому, но ничего не работает. Я также знаю, что мое действие, и я думаю, что мои редукторы работают правильно, так как я отправляю свое действие через консоль : $r.store.dispatch({type: 'SET_TABLE_DATA'}); мое состояние правильно обновляться.

какие советы ?

вот мои действия : 

export const setTableFilter = (click) => {
  return {
    type: 'SET_TABLE_DATA',
    click : click,
  };
};

вот мой редуктор :

const tableFilter = (state = 0, action) => {
    if(action.type === 'SET_TABLE_DATA') {
        return state + 1;
    }
        return state;
  }

и вот мой компонент :

const DisplayTable = (click) => {

        return (
        <div>
            <button onClick={DisplayTable(click)}>cool</button>
        </div> )
    }


function mapStateToProps(state) {
  return {
      click: state.tableFilter.click
  };
};


const mapDispachToProps = (dispatch) => {
    return {
  DisplayTable: (click) => {dispatch (setTableFilter(click));
        },
    };
};

const AppTable = connect(mapStateToProps, mapDispachToProps)(DisplayTable);

export default AppTable;

Я также знаю, что я должен построить свой редуктор таким образом, чтобы мое состояние было обновлено без каких-либо мутаций, однако я сохраню это позже ! :)

спасибо.

9
reactjs redux

2 ответов

данный ответ на самом деле не объясняет почему ваш код не работал, поэтому я решил расширить это.

ваша проблема заключается в том, что вы превышаете стек вызовов функций, более известный как бесконечная рекурсия. Причина этого заключается в том, что вы не передаете функцию в onClick атрибут вашей кнопки, но скорее вызов функция и передача вместо нее возвращаемого значения. Таким образом, следующий сценарий происходит:

  • компонент React монтируется на DOM
  • render() называется
  • на DisplayTable вызывается функция, которая отправляет обновление в магазин
  • магазин обновляет и передает новые реквизиты компоненту React
  • render() еще
  • DisplayTable повторном вызове

...и так далее.

что вы хотите сделать, это передать функцию кнопка

7

несколько советов, а не полное решение, так как это не поможет вам узнать:

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

функция компонента React принимает реквизит в качестве аргумента:

const Comp = props => {
    const click = props.click;
    // ...
};

mapDispatchToProps - это, как правило, не нужен. Вместо этого используйте простые объекты:

connect(state => state.tableFilter, { setTableFilter })(DisplayTable);

затем вы можете получить доступ к функция от реквизита:

<button onClick={() => props.setTableFilter(click)}>cool</button>

помните: onClick принимает функцию!

также состояние, которое вы определили в редукторе, не имеет свойства клик, вместо этого это число (см. правильную функцию mapStateToProps выше)

2