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

Question

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.

Answer 1

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

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

变成：

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

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

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