【React】Objects are not valid as a React child (found: object with keys {STATUS_TEXT}). If you meant to render a collection of children, use an array instead.の対処法

症状

Reactでコンポーネントを分割する際に、以下のエラーメッセージが表示されてしまいました。 翻訳すると、「オブジェクトはReactの子としては無効です（見つかった：キーが{STATUS_TEXT}のオブジェクト）。子のコレクションをレンダリングする場合は、代わりに配列を使用してください。」でした。

error

Error: Objects are not valid as a React child (found: object with keys {STATUS_TEXT}). If you meant to render a collection of children, use an array instead.

以下がOrder_Statusを渡して、それに対応したTEXTを返すだけのcomponentです。(シンプルに値をもらって、それに対応する文字列を返すだけのコンポーネントです)

taskStatusText.jsx

import {STATUS_TEXT:TASK_TEXT} from "../component/text"

export const taskStatusText = (order_status) => {
    const STATUS_TEXT = []
    
    switch (order_status){
        case "1":
            return{
                STATUS_TEXT:TASK_TEXT.TASK_STATUS_UNFINISHED_TEXT,
            }
        case "2":
            return{
                STATUS_TEXT:TASK_TEXT.TASK_STATUS_FINISHED_TEXT,
            }
        case "3":
            return {
                STATUS_TEXT:TASK_TEXT.TASK_STATUS_TASK_CANCEL_TEXT,
            }
        case "4":
            return {
                STATUS_TEXT:TASK_TEXT.TASK_STATUS_ORDER_CANCEL_TEXT,
            }
    }
}

下記componentから上記のコンポーネントを呼び出して、返ってきた文字を出しています。

Order.jsx

import React,{useState} from "react";
import {taskStatusText} from "../component/taskStatusText "

export const Hoge =(status) => {
const [statusValue,setState] = useState(taskStatusText(state.task.order_status))
  return(
    <div>
      {statusValue}
    </div>
  )
}

解決方法

返ってきたものが配列に入っているSTATUS_TEXTを指定してやることで、解決しました。 エラー内容からはよくわかりませんでしたが、オブジェクトのまま表示させようとしていたため、怒られていたのかもしれません。

Order.jsx

import React,{useState} from "react";
import {taskStatusText} from "../component/taskStatusText "

export const Hoge =(status) => {
const [statusValue,setState] = useState(taskStatusText(state.task.order_status))
  return(
    <div>
      {statusValue.STATUS_TEXT}
    </div>
  )
}

参考