0

Como faço para colocar os dados do json dentro do array "receitas[]" que está no state?

 import recipes from '../receitas/recipes.json'

 constructor(props) {
    super(props);

    this.recipes = recipes.results;  //json dinâmico local   
    this.state = { 
      receitas: [],     
      searchString: ''        
    };
  } 

  componentDidMount(){    
     this.loadReceitas();
  }

  loadReceitas = async () => {
    const recipesList = await this.props.recipes.results;   
    this.setState({ receitas: recipesList.recipes.results });
  }

Desde já agradeço quem puder me ajudar.

2 Respostas 2

0

Se o JSON vai estar fora da pasta src, por exemplo na public, você deve obtê-lo através de uma requisição XMLHttpRequest, possivelmente utilizando a função fetch.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      receitas: [],
      searchString: ""
    };
  }

  componentDidMount() {
    this.loadReceitas();
  }

  loadReceitas = async () => {
    const response = await fetch("receitas/recipes.json");
    console.log("response:", response);
    const recipesList = await response.json();
    console.log("json:", recipesList);

    this.setState({ receitas: recipesList.results });
  };

  render() {
    const { receitas } = this.state;
    const valores = Array.isArray(receitas) ? (
      <ul>
        {receitas.map(elemento => (
          <li>{elemento}</li>
        ))}
      </ul>
    ) : (
      <spam>recipe errado!!!</spam>
    );

    return (
      <div className="App">
        <h1>Conteúdo de recipes</h1>

        {valores}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Exemplo funcionando no Codesandbox.

0

Você pode simplesmente passar o recipes dentro do this.state no construtor. Como a seguir.

constructor(props) {
    super(props);

    this.recipes = recipes.results;  //json dinâmico local   
    this.state = { 
      receitas: this.recipes,     
      searchString: ''        
    };
  } 

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .