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 ( {headerGroups.map((headerGroup) => ( {headerGroup.headers.map((column) => ( {column.render("Header")} ))} ))} {rows.map((row, i) => { prepareRow(row); return ( {row.cells.map((cell) => { return ( {cell.render("Cell")} ); })} ); })}
); } 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 (
); } 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 ( setShow(false)} show={show} dismissible > {message}
); }
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 ».
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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).