Array.forEach 的问题

Question

希望这里有人能够帮助我。

我正在尝试从一组对象构建一个 Owl-Carousel。但由于某种原因无法识别数组，如果有人能帮助找出我在这里犯的错误，我将不胜感激。

我收到的错误消息是：

'item' is not defined. and 'tv' is assigned a value but never used.

这里有代码：

const tv = [
    {
        name: 'Meu Pedacinho de Chao 01',
        personagem: 'Barbeiro',
        ano: 2014,
        de: 'Benedito Ruy Barbosa',
        img: { mpc1 },
        alt: 'Meu Pedacinho de Chao 01'
     
    }...
    
]

export class Televisao extends Component {
    render() {
        return (
            <div class='container-fluid' >
                tv.forEach(function (item) {
                    <OwlCarousel items={3}
                        className="owl-theme"
                        loop
                        nav
                        margin={8} >

                        <div className='item card' >
                            <img className='"card-img-top" ' src={item.img} alt={item.alt} />
                            <div className='card-body' >
                                <h5 className="card-title" > ${item.name} </h5>
                                < p class="card-text" > ${item.personagem} </p>
                                < p class="card-text" > ${item.ano} </p>
                                < p class="card-text" > ${item.de} </p>
                            </div >
                        </div >
                    </OwlCarousel >
                }
            </div>
        )
    }
}

export default Televisao;

Answer 1

forEach 为每个元素执行一个函数，在这种情况下你想要 map （并且必须 return 来自函数的 JSX，你目前没有这样做）

const tv = [
    {
        name: 'Meu Pedacinho de Chao 01',
        personagem: 'Barbeiro',
        ano: 2014,
        de: 'Benedito Ruy Barbosa',
        img: { mpc1 },
        alt: 'Meu Pedacinho de Chao 01'
     
    }...
    
]

export class Televisao extends Component {
    render() {
        return (
            <div class='container-fluid' >
                tv.map(function (item) {
                    return (<OwlCarousel items={3}
                        className="owl-theme"
                        loop
                        nav
                        margin={8} >

                        <div className='item card' >
                            <img className='"card-img-top" ' src={item.img} alt={item.alt} />
                            <div className='card-body' >
                                <h5 className="card-title" > ${item.name} </h5>
                                < p class="card-text" > ${item.personagem} </p>
                                < p class="card-text" > ${item.ano} </p>
                                < p class="card-text" > ${item.de} </p>
                            </div >
                        </div >
                    </OwlCarousel >)
                }
            </div>
        )
    }
}

export default Televisao;

Answer 2

任何表达式 Javascript 都应该在大括号“{}”内并用 map 替换 forEach 因为 forEach 没有 return 任何东西，我注意到你使用了一个函数并且没有 return 任何解决这个问题的方法都可以在 OwlCarousel 组件之前添加 return 或使用带括号的箭头函数。

const tv = [
    {
        name: 'Meu Pedacinho de Chao 01',
        personagem: 'Barbeiro',
        ano: 2014,
        de: 'Benedito Ruy Barbosa',
        img: { mpc1 },
        alt: 'Meu Pedacinho de Chao 01'
     
    }...
    
]

export class Televisao extends Component {
    render() {
        return (
            <div className="container-fluid">
                {tv.map((item)=>(
                    <OwlCarousel items={3}
                        className="owl-theme"
                        loop
                        nav
                        margin={8}>
                        <div className="item card" >
                            <img className="card-img-top" src={item.img} alt={item.alt} />
                            <div className="card-body">
                                <h5 className="card-title">{item.name}</h5>
                                <p className="card-text">{item.personagem}</p>
                                <p className="card-text">{item.ano}</p>
                                <p className="card-text">{item.de}</p>
                            </div>
                       </div>
                    </OwlCarousel>
                )}
            </div>
        )
    }
}

export default Televisao;

Array.forEach 的问题

Issues with an Array.forEach

javascript

foreach

reactjs

owl-carousel