嘗試從我的 api 中獲取 map 數據時，對象作為 React 子項無效

Question

我收到錯誤

錯誤：對象作為 React 子對象無效（發現：object 鍵為 {id, recipe_dificulty, recipe_id, recipe_name, recipe_steps}）

我正在使用 Axios 來獲取我的數據，這里是提供給我的 react 項目的數據。

https://pastebin.com/ydNrFLBW （此處發布的信息太多）

這是我的膳食計划 class，這是第一次使用信息的地方。

export default class Mealplans extends Component {   constructor(props) {
      super(props)

      this.state = {
          mealplanItems: []
      }   }

  componentDidMount() {
    axios.get('http://localhost:5000/all-mealplans'
    ).then(response => {
      console.log(response)
      this.setState({
        mealplanItems: this.state.mealplanItems.concat(
          response.data["mealplans"])
      })
    }).catch(error => {
      console.log("ERROR!", error)
    })   }

  render() {
    const mealplanRecords = this.state.mealplanItems.map(mealplanItem => {
      return <MealplanItem mealplanItem={mealplanItem} />
    })
      return (
          <div>
            <div className="mealplan-page-header">
              <h1>Newest Mealplans</h1>
              <hr />
            </div>
              <div className="content-container">
                {mealplanRecords}
              </div> 
          </div>
      )   } }

Answer 1

我的猜測是 MealplanItem 中的 mealplanItem 是{object} ( {id, recipe_dificulty, recipe_id, MealplanItem {id, recipe_dificulty, recipe_id, recipe_name, recipe_steps} ) 並且它正在打印它。

React 不打印 object。

在MealplanItem

//for example...

<div>
  <span>{mealplanItem.id}</span>
</div>

像這樣試試。