Как использовать материализованные сетки CSS или реагировать на загрузочные сетки, чтобы показать 3 элемента в каждом ряду из намеченного ответа в ReactJS? - PullRequest
Новая
       18

Как использовать материализованные сетки CSS или реагировать на загрузочные сетки, чтобы показать 3 элемента в каждом ряду из намеченного ответа в ReactJS?

0 голосов
/ 19 сентября 2019

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

Я пытался использовать как начальную загрузку, так и css-материализацию для выполнения этой работы.Однако документальный фильм не показывает для картографирования примеры, которые я имею.Также попытался добавить className "row" в родительский div и className "col" для дочерних div'ов, как сказали документы.Но он просто повторяет один и тот же элемент снова и снова.Я хочу, чтобы каждый отдельный элемент отображался только один раз. 

import React from "react";
import axios from "axios";
import LoadingIndicator from "./loadingIndicator"

const API_KEY="something";
const API_KEY2="something1";
const API_KEY3="something2"

class Recipes extends React.Component {

    state= {
        ingredients:[this.props.ingredients],
        loaded:false
    }

    handleChange=(e)=> {
        this.setState({
            [e.target.id]: e.target.value
        })
    }

    handleSubmit=(e)=> {
        e.preventDefault();
        console.log(this.state);
        axios.get(`https://www.food2fork.com/api/search?key=${API_KEY3}&q=${this.state.name}`)
            .then(res=> {
                console.log(res)
                this.setState({
                    ingredients:res.data.recipes,

                })
            })
    }


    render() {  



        const recipeList = this.state.ingredients.length >0? this.state.ingredients.map((ingredient)=> {
            return(
                <div className="row" key={ingredient.recipe_id}>
                   <div className="col s12 m6 l3">
                    <img className="recipeImage" src={ingredient.image_url}/>
                    <p>{ingredient.title}</p>
                   </div>
                </div>
            )
        }) : <LoadingIndicator loaded={this.state.loaded}/>
        return(
            <div style={{padding:50}}>
            <form className="form" onSubmit={this.handleSubmit}>
                <label>Food Name or Ingredient: </label>
                <input
                    id="name"
                    onChange={this.handleChange}
                    className="formText"
                    type="text"
                    placeholder="type in ingredient or recipe"
                 />
                 <button className="btn waves-effect waves-light" type="submit" name="action">Submit</button>
            </form>
                <div style={{marginTop:100}}>
                    {recipeList}
                </div>   
            </div>
        );
    }

}


export default Recipes;

До сих пор я его показывал, но с одним и тем же элементом ответа просто повторял три раза в одной и той же строке.Я хочу, чтобы каждый отдельный элемент отображался только один раз в каждой строке

1 Ответ

0 голосов
/ 19 сентября 2019

Функция map имеет необязательный аргумент для index, который можно использовать для отслеживания текущего index элемента в итерации, а также аргумент для самого массива, который итерируется.

По сути, вы хотите создать открывающий тег div.row в начале каждой 0-й, 3-й, 6-й ... и т. Д.Вы также хотите закрывать тег на каждой 2-й, 5-й, 8-й итерации.Таким образом, вы перемещаете этот код в условие if, используя атрибут index. 

this.state.ingredients.map((ingredient,i, ingredientList) => {
    if (ingredientList.length == 1) { //if only one item in the list add starting and closing tags
        return (
           <div className="row" key={ingredient.recipe_id}>
               <div className="col s12 m6 l3">
                <img className="recipeImage" src={ingredient.image_url}/>
                <p>{ingredient.title}</p>
               </div>
           </div>
       )        
    else if (i%3 === 0){ 
       return ( //add opening tag at every multiple of 3
        <div className="row" key={ingredient.recipe_id}>
               <div className="col s12 m6 l3">
                <img className="recipeImage" src={ingredient.image_url}/>
                <p>{ingredient.title}</p>
               </div>
       )
    else if(i%3 === 2 || i === ingredientList.length-1){//add closing tag if last item or 2nd, 5th, 8th...
       return (
             <div className="col s12 m6 l3">
                <img className="recipeImage" src={ingredient.image_url}/>
                <p>{ingredient.title}</p>
             </div>
         </div>
       )
    else { //Only add element otherwise
       return (
              <div className="col s12 m6 l3">
                <img className="recipeImage" src={ingredient.image_url}/>
                <p>{ingredient.title}</p>
             </div>
       )
    }
});
...