Передайте JSON как опору между двумя React. js Components

Question

Я пытался передать объект JSON, полученный нажатием REST API после отправки формы + пользовательский ввод. Я могу передать полученные данные другому компоненту в том же файле (этот второй компонент пытается l oop поверх JSON и отобразить его как таблицу HTML), но когда я пытаюсь применить map функционировать над ним, он не работает. Заранее спасибо. Пожалуйста, найдите ошибку и код ниже:

ОШИБКА:

TypeError: this.props.rocks.map is not a function

Код:

import React, {Component} from 'react'
import './App.css'
import axios from 'axios'

class FooBar extends Component {
    constructor(props) {
        super(props);
    }

     render() {
        console.log(this.props.rocks);
        this.props.rocks.map(function (i, j) {
            console.log(i)
        })
        return <h1>HEY</h1>
    }
}

class App extends Component {
    weekDays = ["Sunday", "Monday"]
    meals = ["BreakFast"]

    constructor(props) {
        super(props);
        this.state = {
            recipeList: [],
            selectedRecipes: [],
            fetchedJson: {},
            fooBar: false
        }
  }

  renderTableHeader() {
    return this.meals.map((key, mealIndex) => {
      return <th key={mealIndex}>{key.toUpperCase()}</th>
    })
  }

  componentDidMount() {
    axios.get(`http://localhost:8080/recipe/all`)
        .then(res => {
          this.setState({ recipeList: res.data });
          // todo: line here will work before lines outside the axios.get
        })
  }

  handleChange(event){
    event.preventDefault();
    console.log(event.target.value);
    this.state.selectedRecipes.push(event.target.value);
  }

  renderTableData() {
    return this.weekDays.map(function (day, dayIndex) {
      return (
          <tr key={dayIndex}>
            <td>{day}</td>
              {
                this.meals.map(function (meal, mealIndex) {
                  return (
                      <td key={mealIndex}>
                        {
                          <select key={meal} onChange={this.handleChange.bind(this)}>
                              <option key="blankOption">Choose Item to Cook</option>
                            {
                              this.state.recipeList.map(function (recipe, recipeIndex) {
                                return <option key={recipeIndex}>{recipe}</option>
                              })
                            }
                          </select>
                        }
                      </td>
                  );
                }.bind(this))
              }
          </tr>
      );
    }.bind(this)) // todo: how does bind work
  }

  handleSubmit(event){
      event.preventDefault();
      console.log(this.state.recipeList);
      let url = 'http://localhost:8080/ingredients/?recipes=' + this.state.selectedRecipes.join(',')
    axios.get(url)
        .then(res => {
          console.log(res.data);
          this.setState({
              fetchedJson: res.data,
              fooBar: true
          })
        })
      this.setState({
          selectedRecipes: []
      })
  }

  render() {
      return (
          <div>
              <form onSubmit={this.handleSubmit.bind(this)}>
                  <table id='students' border="1">
                      <tbody>
                      <tr>
                          <td><b>WeekDay</b></td>
                          {
                              this.renderTableHeader()
                          }
                      </tr>
                      {this.renderTableData()}
                      </tbody>
                  </table>
                  <input type="submit" value="Submit"/>

              </form>
              {this.state.fooBar && <FooBar rocks={this.state.fetchedJson}/>}
          </div>
    )
  }
}
export default App

Answer 1

Ошибка очень ясна. Функция карты работает только для массива. Я думаю, что вы передали реквизиты как тип объекта вместо массива. Вот почему он выдает ошибку.

Шаг 1: Измените строку на выбранную Json: [] вместо выбранной Json : {},

Шаг 2. Также проверьте, что res.data должен быть типом массива, а не объектом. ('http://localhost: 8080 / ингридиенты /? Recipes = ')

Answer 2

Мы можем применить функцию карты только к массиву. Но вы объявили извлеченный Json как объект в Компоненте приложения. Сначала измените объект {} на массив []. Следующая проверка this.props.rocks дает массив с данными или нет. Затем вы можете применить функцию карты.