Objects are not valid as a React child

index.js (react，用了useReducer)

const defaultState = {
  people: [],
  isModalOpen: false,
  modalContent: '',
};

...

return (
  <>
    {state.isModalOpen && <Modal modalContent={state.modalContent}/>}
    ...
  </>
);

modal.js

const Modal = (modalContent) => {
  return (
    <div className='modal'>
      <p>{modalContent}</p>
    </div>
  );
};

解决方法：

const modal = ({modalContent}) => {
  ...
}

or

<p>{modalContent.modalContent}</p>

来源：

stackoverflow.com/questions/5…

stackoverflow.com/questions/7…