Реагировать, ошибка: объекты недопустимы в качестве дочерних элементов React (найдено: объект с ключами {данные})

Question

Когда я пытался передать число в качестве аргумента функции внутри JSX, произошла указанная выше ошибка.

Ссылка на рабочий файл: https://codesandbox.io/s/divine-hill-v3gl3?fontsize=14&hidenavigation=1&theme=dark&file= / new. js

компонент React.

function Rating(data) {
  // This function indent to display number 0 to 3 based on 'data'; 
  switch (data) {
    case data <= 0: {
      return <div>0</div>;
    }
    case 0 < data <= 1: {
      return <div>1</div>;
    }
    case 1 < data <= 2: {
      return <div>2</div>;
    }
    case 2 < data <= 3: {
      return <div>3</div>;
    }
    default:
      return data;
  }
}

function some() {
  return (
    <div>
      <Rating data={product.totalrating} />
    </div>
  );
}

export default some;

Answer 1

Вы используете объект prop вместо фактических данных:

// not Rating(data), 
// as the argument of function component is a prop object
function Rating({data}) {
  //...
  return data;
}

Answer 2

Когда вы передаете реквизиты компоненту, вы получаете их как объект. Если вы передадите

<Rating data={data} />

, тогда вы получите реквизиты в компоненте рейтинга, например {data: YOUR DATA}

Ссылка на рабочую песочницу https://codesandbox.io/s/fancy-smoke-wl8he

Answer 3

Проблема, которую вы получаете, здесь:

function Rating(data) {

В компоненте вы получаете PROPS, поэтому вы получаете такой объект:

data: {
 data: 1
}

В вашем коде вы сравниваете с объектом, чтобы вы получили регистр по умолчанию в переключателе, возвращая объект выше.

, чтобы исправить это, вы можете сделать:

function Rating({data}) {

или

function Rating(props) {

и используйте props.data для ваших сравнений.