Heim  >  Fragen und Antworten  >  Hauptteil

Fehler beim Behandeln der Funktionskomponente als React-Objekt: Objekt ist kein gültiges React-Kindelement (gefunden: Objekt mit Schlüssel)

Ich versuche, eine Alert-Komponente zu rendern. Wenn eine Requisite von der übergeordneten Komponente an sie übergeben wird, sollte sie gerendert werden, aber ich erhalte eine Fehlermeldung

Ungefangener Fehler: Das Objekt ist kein gültiges untergeordnetes React-Element (Gefunden: Objekt mit den Schlüsseln {message, showAlerts}. Wenn Sie eine Sammlung untergeordneter Elemente rendern möchten, verwenden Sie stattdessen ein Array.

Ich bin nicht sicher, warum React meine Funktionskomponente als Objekt behandelt. Code-Sandbox-Link: https://codesandbox.io/s/exciting-smoke-mij6ke?file=/src/App.js:0-3054

Dies ist die übergeordnete Komponente:

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;

Unterkomponente:

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

Was mache ich hier falsch und was sollte ich ändern?

Ich habe versucht, die untergeordneten Komponenten der Warnungen so darzustellen, dass sie meiner Meinung nach akzeptiert wurden. Wenn auf die Schaltfläche geklickt wird, muss die Alert-Komponente das Alert-Feld rendern und öffnen. Beim Schließen einer Warnung muss auch die Statusvariable in der übergeordneten Komponente, die die Warnungen anzeigt (showAlerts), auf „false“ geändert werden.

P粉548512637P粉548512637428 Tage vor652

Antworte allen(1)Ich werde antworten

  • P粉492959599

    P粉4929595992023-09-11 10:02:44

    将下面这句话翻译成中文,保留html代码,不用增加新内容:

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

    变成:

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

    因为props总是一个对象,并且它们作为第一个参数传递。

    在参数列表中使用花括号意味着你正在解构第一个参数(即props参数)。

    Antwort
    0
  • StornierenAntwort