我正在尝试从同一行的映射响应中显示三个或四个响应项。 我看过其他堆栈溢出,但是他们的问题略有不同,我不知道如何实现该示例。

我试图同时使用引导程序和CSS物化网格来完成这项工作。 但是,该纪录片没有显示我拥有的映射示例。 也尝试像文档所说的那样将“ row”的className添加到父div并将“ col”的className添加到子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

map函数具有用于index的可选参数,该参数可用于跟踪迭代中项目的当前index ,以及用于迭代的数组本身的参数。

您本质上想要做的是在每第div.row等次迭代的开始创建div.row开头标签。 您还希望在第2、5、8次迭代中关闭标签。 因此,您可以使用index属性将该代码移至if条件。

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

  ask by Kenny Q translate from so

未解决问题?本站智能推荐:

2回复

反应-在渲染功能中使用嵌套地图功能来创建2D板/网格

我对React还是很陌生,我正在创建John Conway的“生活游戏”项目。 我正在尝试创建一个2D正方形的网格作为我的游戏板。 我的方法是在渲染/返回中使用map函数来创建网格。 我有一个包含以下内容的Square.js组件: 然后在App.js中,我尝试使用嵌套的.map函数创
3回复

在反应中映射对象数组

我有一组具有以下格式的对象。 我如何映射这个数组,以便我可以为每个对象拥有一篇 HTML 文章,以及显示每个对象的数据、来源、目的地、价格和可用性的 ap 标签?
2回复

在ReactJS中的地图内映射

我试图将每个值和字体真棒图标映射到每个按钮。 每个值的数据 用于映射字体真棒图标的代码 尝试解决 关于如何在映射值数组的同​​时让每个图标显示在每个按钮中的任何想法?
3回复

使用useEffect钩子在反应功能组件中不使用.map()显示的元素

我在 useEffect 回调中创建了一系列类别,当我 console.log 时它工作正常。 但是当我 .map() 它时,结果数组是空的。 有人有想法吗?
1回复

在本机反应中映射状态数组

我不确定出了什么问题。 我正在导入一个使用 useState 和 useEffect 的函数。 该函数使用 fetch 调用中的数据返回处于我状态的变量。 但是,当我尝试映射该数据时,出现错误:未定义映射。 我的语法看起来正确,这在常规反应中有效,所以我不确定现在出了什么问题。 我得到了回复,文件正
2回复

在React中映射数组

我正在状态状态的item属性内的对象数组内映射每个对象。 问题是,我希望能够将按钮附加到仅适用于该项目的每个返回项目,而不适用于其他项目。 这是我到目前为止的内容: 因此,例如,如果按钮的fx更改了与之一起渲染的项目的name属性,我希望它仅更改该项目,而不会影响其他项目。 每当我遍历
1回复

反应映射对象,定位错误

我在映射获取的对象时遇到了一些麻烦,我知道这是一个已知问题,但是已经停留了两天,所以我来寻求帮助。 我正在尝试通过api在ul上输出数据,但是我要么出错,要么什么都没有输出,我知道我以错误的方式将对象内部的数据作为目标,这是我第一次尝试以一个对象为目标用这种钥匙 我有一个看起来像这样的对
2回复

在我的React应用程序中,如何在此映射函数中的每个项目之后添加换行符?

我一直在我的 React 应用程序中使用这个 redux 选择器。 我已经取得了很好的进展,但我在处理的最后一个问题上遇到了困难,我觉得它不应该那么难解决,但我正在挣扎。 我想要实现的是在每个项目都被映射后,下一个项目必须转到一个新行。 唯一需要查看的相关代码是 map 函数。 我希望每个项目在被映