Objects are not valid as a React child报错解决

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
  ];
  const obj = {
    id: 4,
    name: 'Dean',
    country: 'Denmark',
  };
  // ⛔️ Uncaught Error: Objects are not valid as a React child (found: object with keys {id, name, country}).
  // If you meant to render a collection of children, use an array instead.
  return (
    <div>
      {employees}
      {obj}
    </div>
  );
}

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
  ];
  const obj = {
    id: 4,
    name: 'Dean',
    country: 'Denmark',
  };
  return (
    <div>
      {employees.map((employee, index) => {
        return (
          <div key={index}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>
            <hr />
          </div>
        );
      })}
      <hr />
      <hr />
      <hr />
      <div>
        <h2>name: {obj.name}</h2>
        <h2>county: {obj.country}</h2>
      </div>
      <hr />
    </div>
  );
}

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
  ];
  const obj = {
    id: 4,
    name: 'Dean',
    country: 'Denmark',
  };
  return (
    <div>
      <h4>{JSON.stringify(employees)}</h4>
      <h4>{JSON.stringify(obj)}</h4>
    </div>
  );
}

export default function App() {
  const date = new Date();
  // ⛔️ Objects are not valid as a React child (found: [object Date]).
  return (
    <div>
      <h4>{date}</h4>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <h4>{date.toLocaleDateString()}</h4>
    </div>
  );
}

export default function App() {
  const message = 'hello world';
  // ⛔ Objects are not valid as a React child (found: object with keys {message}).
  return (
    <div>
      <h4>{{message}}</h4>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <h4>{message}</h4>
    </div>
  );
}

export default function App() {
  async function getData() {
    return Promise.resolve(42);
  }
  // ⛔ Objects are not valid as a React child (found: [object Promise]).
  return (
    <div>
      <h4>{getData()}</h4>
    </div>
  );
}

import {useEffect, useState} from 'react';
export default function App() {
  const [num, setNum] = useState(0);
  useEffect(() => {
    async function getData() {
      const result = await Promise.resolve(42);
      setNum(result);
    }
    getData();
  }, []);
  return (
    <div>
      <h4>{num}</h4>
    </div>
  );
}