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

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

Я пытался использовать как начальную загрузку, так и 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;

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


reactjs javascript user-interface grid array.prototype.map
person Kenny Q    schedule 18.09.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Функция 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>
       )
    }
});
person Nabeel Mehmood    schedule 19.09.2019