React-Redux: слишком много повторных рендеров - PullRequest
Новая
       194

React-Redux: слишком много повторных рендеров

0 голосов
/ 06 августа 2020

В моем приложении response / redux я пытаюсь, чтобы AddBoxIcon выскакивал Modal при каждом нажатии. В настоящий момент я получаю сообщение об ошибке

Ошибка: слишком много повторных отрисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечное l oop.

2-я проблема, я подозреваю, что способ, которым я настроил действие toggleModal , может быть неправильным.

Мой способ не работает. 

// Toggle Modal action
export const toggleModal = () => (dispatch) => {
  dispatch({
    type: TOGGLE_MODAL,
  });
};

// Invoice Reducer
const initialState = {
  invoiceData: [],
  newInvoiceModal: false,
};

export default function (state = initialState, action) {
  switch (action.type) {
    case TOGGLE_MODAL:
      return {
        ...state,
        newInvoiceModal: !state.newInvoiceModal
      };

    case GET_INVOICE_DATA:
      return {
        ...state,
        invoiceData: action.payload,
      };

    case ADD_INVOICE_DATA:
      return {
        ...state,
        invoiceData: action.payload,
      };

    default:
      return state;
  }
}

Таблица счетов компонент 

import AddInvoiceModal from './AddInvoiceModal'
import { getInvoiceData, toggleModal } from "../../actions/customers/invoice";

const InvoiceTable = (props) => {
  const invoiceData = useSelector((state) => state.invoice.invoiceData);
  const newInvoiceModal = useSelector((state) => state.invoice.newInvoiceModal);  
  const dispatch = useDispatch(); 

  useEffect(() => {
    dispatch(getInvoiceData());
  }, [dispatch]);
  

  const classes = useStyles();

  const columns = [
    { name: "date", label: "Date" },
    { name: "invoiceOwner", label: "Name" },
    { name: "invoiceNo", label: "Invoice No" },
    { name: "product", label: "Product" },
  ];

  return (
    <div className={classes.root}>

      {/* ADD NEW EMPLOYEE MODAL */}
      <AddInvoiceModal 
        toggleModal={dispatch(toggleModal())} 
        newInvoiceModal={newInvoiceModal} 
      />

      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>
            <MUIDataTable
              title={
                <Fragment>
                  Purchase Invoice
                  <Tooltip title="Add">
                    <AddBoxIcon          <===== ADD ICON
                      color="action"
                      style={addIcon}
                      onClick={dispatch(toggleModal())}  <===== MODAL TRIGGER
                    />
                  </Tooltip>
                </Fragment>
              }
              data={invoiceData}
              columns={columns}
              options={options}
            />
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
};

InvoiceTable.propTypes = {
  invoiceData: PropTypes.object.isRequired,
  getInvoiceData: PropTypes.func,
  toggleModal: PropTypes.func,
  newInvoiceModal: PropTypes.bool,
};

export default InvoiceTable;

Модальный файл 

const AddInvoiceModal = (props) => {
    return (
      <div className="App container">
        <Modal isOpen={props.newInvoiceModal} scrollable={true}>
          <ModalHeader toggle={props.toggleModal}>Add Invoice</ModalHeader>
          <ModalBody>
            <h2>Hello</h2>
          </ModalBody>
          <ModalFooter>
            <Button
              color="primary"
            >
            Submit
            </Button>{" "}
            <Button
              color="secondary"
            >
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    );

}

export default AddInvoiceModal;

1 Ответ

4 голосов
/ 06 августа 2020

Честно говоря, я думаю, что единственная проблема в том, что этот 

toggleModal={dispatch(toggleModal())}

должен быть 

toggleModal={() => dispatch(toggleModal())}

прямо сейчас каждый рендер будет вызывать dispatch(toggleModal()), что вызовет повторный рендеринг, который позвонит еще раз

...