在 react js 中添加一个功能组件到 useEffect 方法

Question

我正在尝试在 useEffect 方法中添加示例 ModalPage 功能组件，但它显示错误：

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

Answer 1

正如@Nisharg Shah 所说，您不能在useEffect 挂钩内调用<ModalPage/>。尝试将其更改为：

  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 "</>"
  }))

然后要渲染，您可以将其添加到您的 return 语句中：

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