Erreur lors de la gestion du composant de fonction en tant qu'objet de réaction : l'objet n'est pas un élément enfant React valide (trouvé : objet avec clé)

Question

J'essaie de restituer un composant Alert. Lorsqu'un accessoire lui est transmis depuis le composant parent, il devrait s'afficher, mais j'obtiens une erreur

Erreur non détectée : l'objet n'est pas un élément enfant React valide (Trouvé : objet avec les clés {message, showAlerts}. Si vous souhaitez afficher une collection d'éléments enfants, utilisez plutôt un tableau.

Je ne sais pas pourquoi React traite mon composant fonctionnel comme un objet. Lien du bac à sable de code : https://codesandbox.io/s/exciting-smoke-mij6ke?file=/src/App.js:0-3054

Voici le composant parent :

import styled from "styled-components";
import { useTable } from "react-table";
import Alert from "react-bootstrap/Alert";
import Button from "react-bootstrap/Button";
import axios from "axios";

import AppAlerts from "./components/Alerts";

const Styles = styled.div`
  padding: 1rem;

  table {
    border-spacing: 0;
    border: 1px solid black;

    tr {
      :last-child {
        td {
          border-bottom: 0;
        }
      }
    }

    th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
    }
  }
`;

function Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  const [showAlert, setShowAlert] = useState(false);
  const [alertMessage, setAlertMessage] = useState("");
  const handleButttonClick = () => {
    setShowAlert(true);
    setAlertMessage("dummy text");
  };

  // Render the UI for table
  return (
    <div>
      <div>
        <AppAlerts message={alertMessage} showAlerts={showAlert} />;
      </div>

      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return (
                    <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
      <Button onClick={handleButttonClick}>Open Alert box</Button>
    </div>
  );
}

function App() {
  // const [data, setData] = useState([]);
  // const [columns, setColumns] = useState([]);

  const columns = React.useMemo(
    () => [
      { Header: "Id", accessor: "id" },
      { Header: "Applicant", accessor: "applicant" },
      { Header: "Pincode", accessor: "pincode" },
      { Header: "District", accessor: "district" },
      { Header: "State", accessor: "state" }
    ],
    []
  );
  const data = React.useMemo(
    () => [
      {
        id: 18,
        applicant: "Buzz",
        pincode: 560096,
        district: 1,
        state: 1
      },
      {
        id: 19,
        applicant: "Sue",
        pincode: 560100,
        district: 2,
        state: 1
      }
    ],
    []
  );

  return (
    <div className="App">
      <Styles>
        <Table columns={columns} data={data} />
      </Styles>
    </div>
  );
}

export default App;

Sous-composant :

import { useEffect, useState } from "react";
import Alert from "react-bootstrap/Alert";

export default function AppAlerts(message, showAlerts) {
  const [show, setShow] = useState(showAlerts);

  return (
    <Alert
      variant="info"
      onClose={() => setShow(false)}
      show={show}
      dismissible
    >
      <p>{message}</p>
    </Alert>
  );
}

Qu'est-ce que je fais de mal ici et que dois-je changer ?

J'ai essayé de restituer les composants enfants des alertes d'une manière que je pensais acceptée. Lorsque vous cliquez sur le bouton, le composant Alert doit afficher et ouvrir la boîte d'alerte. Lors de la fermeture d'une alerte, la variable d'état dans le composant parent qui affiche les alertes (showAlerts) doit également être remplacée par « false ».

Answer 1

Traduisez la phrase suivante en chinois, conservez le code html et n'avez pas besoin d'ajouter de nouveau contenu :

export default function AppAlerts(message, showAlerts) { ... }

devient :

export default function AppAlerts({message, showAlerts}) { ... }

Parce que les accessoires sont toujours un objet et qu'ils sont passés comme premier paramètre.

L'utilisation d'accolades dans la liste des paramètres signifie que vous déstructurez le premier paramètre (c'est-à-dire le paramètre props).