Блог

Я получаю сообщение об ошибке

Ошибка: объекты недопустимы как дочерние элементы React (найдено: объект с ключами {id, recipe_dificulty, recipe_id, recipe_name, recipe_steps})

Я использую Axios для получения своих данных, вот данные, которые передаются в мой проект react.

https://pastebin.com/ydNrFLBW (Слишком много информации для размещения здесь)

Вот мой класс Mealplans, в котором впервые используется информация.

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

Я предполагаю, что mealplanItem находится {object} ( {id, recipe_dificulty, recipe_id, recipe_name, recipe_steps} ) в MealplanItem и печатает его как есть.

React не печатает объект.

в MealplanItem

 //for example...

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

Попробуйте сделать это так.