Ralat semasa mengendalikan komponen fungsi sebagai objek tindak balas: objek bukan elemen anak React yang sah (ditemui: objek dengan kunci)

Question

Saya cuba membuat komponen Makluman, apabila prop dihantar kepadanya daripada komponen induk, ia sepatutnya dipaparkan, tetapi saya mendapat ralat

Ralat Tidak Ditangkap: Objek bukan elemen React child yang sah (Found: Object with keys {message, showAlerts}. Jika anda ingin memaparkan koleksi elemen anak, gunakan tatasusunan.

Saya tidak pasti mengapa React menganggap komponen fungsi saya sebagai objek. Pautan kotak pasir kod: https://codesandbox.io/s/exciting-smoke-mij6ke?file=/src/App.js:0-3054

Ini ialah komponen induk:

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;

Subkomponen:

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

Apa salah saya di sini dan apakah yang perlu saya ubah?

Saya cuba memaparkan komponen anak Alerts dengan cara yang saya fikir telah diterima. Komponen Amaran mesti memaparkan dan membuka kotak amaran apabila butang diklik. Apabila menutup makluman, pembolehubah keadaan dalam komponen induk yang memaparkan makluman (showAlerts) juga mesti ditukar kepada 'false'.

Answer 1

Terjemah ayat berikut ke dalam bahasa Cina, kekalkan kod html dan tidak perlu menambah kandungan baharu:

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

menjadi:

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

Kerana prop sentiasa menjadi objek dan ia diluluskan sebagai parameter pertama.

Menggunakan pendakap kerinting dalam senarai parameter bermakna anda sedang memusnahkan parameter pertama (iaitu parameter props).