Блог

Главная - Вопросы по программированию - Добавление функционального компонента в метод useeffect в react js

Добавление функционального компонента в метод useeffect в react js

#reactjs #mdbreact

Вопрос:

Я пытаюсь добавить пример ModalPage функционального компонента в метод useEffect, но он показывает ошибку:

введите описание изображения здесь

 const [data, setData] = React.useState('');

useEffect(() => {
  const requestOptions = {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    },
   };
fetch('http://localhost:4000/api/users/getUserDetails', requestOptions)
  .then(response => response.json())
  .then(res => {
    const data = {
      columns: [{
          label: 'First Name',
          field: 'FirstName',
          sort: 'asc',
          width: 150
        },
        {
          label: 'Last Name',
          field: 'LastName',
          sort: 'asc',
          width: 270
        },
        {
          label: 'Email',
          field: 'Email',
          sort: 'asc',
          width: 200
        },
        {
          label: 'Phone Number',
          field: 'PhoneNumber',
          sort: 'asc',
          width: 100
        },
        {
          label: 'Edit',
          field: 'Edit',
          width: 100
        },
       ],
      rows: res.isUser.map((data) => ({
        FirstName: data.firstName,
        LastName: data.LastName,
        Email: data.email,
        PhoneNumber: data.phoneNumber,
        edit :  <ModalPage/>
      }))
    }
    setData(data);
  })
}, [])

это модальная страница

   export default function ModalPage() {
   const [show, setShow] = React.useState(false);

    function toggle () {
      setShow({
       show: !show
      });
    }

  return (
     <MDBContainer>
      <MDBBtn onClick={toggle}>Modal</MDBBtn>
       <MDBModal isOpen={show} toggle={toggle}>
       <MDBModalHeader toggle={toggle}>MDBModal title</MDBModalHeader>
        <MDBModalBody>
        (...)
        </MDBModalBody>
       <MDBModalFooter>
      <MDBBtn color="secondary" onClick={toggle}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
</MDBContainer>
);
}

Комментарии:

1. Проблема не связана с useEffect проблемой связана с useState тем, что вы не можете использовать <ModalPage /> в useEffect

2. есть ли какой-либо другой способ позвонить в modal component

3. Да, вы можете объединить эти строки в функции визуализации, и это будет работать

Ответ №1:

Как сказал @Nisharg Shah, вы не можете звонить <ModalPage/> внутри useEffect крючка. Попробуйте изменить его на этот:

   rows: res.isUser.map((data) => ({
    FirstName: data.firstName,
    LastName: data.LastName,
    Email: data.email,
    PhoneNumber: data.phoneNumber,
    Edit:  ModalPage // Note the removal of the tags "</>"
  }))

Затем для визуализации вы можете добавить это в свое заявление о возврате:

     <MDBModalBody>
        {data.rows.map(row => <Edit/>)}
    </MDBModalBody>

Комментарии:

1. как определить строки, отредактируйте в компоненте modalPage, потому что он показывает ошибку, называемую not defined

2. Я отредактировал, чтобы было понятнее — это должны быть данные.строки

3. нужно определить data и Edit/> в модальном компоненте , он выдает ошибку srccomponentsusersmodalUser.js Строка 19:14: «данные» не определена Строка 19:36: «Редактировать» не определена

Метки: