reactjs 数组的问题,forEach [duplicate]

1dkrff03 于 2023-01-30 发布在 React

关注(0)|答案(2)|浏览(118)

- 此问题在此处已有答案**：

（17个答案）
map function not working in React（3个答案）
昨天关门了。
希望这里有人能帮我。
我正试图建立一个猫头鹰旋转木马从一个数组的对象。但由于某种原因，数组是不被认可，将不胜感激，如果有人可以帮助找到我在这里犯的错误。
我收到的错误消息是：
未定义"item"。并且为"tv"分配了值，但从未使用过。
这里你有代码：

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;

reactjs

来源：https://stackoverflow.com/questions/72257871/issues-with-an-array-foreach

2条答案

按热度按时间

tgabmvqs1#

任何表达式Javascript都应该在花括号“{}”内，并将forEach替换为map，因为forEach不返回任何东西，我注意到您使用了一个函数，但不返回任何东西。要解决这个问题，您可以在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;

赞(0）回复(0）举报 2023-01-30

a64a0gku2#

forEach为每个元素执行一个函数，在本例中需要map（并且必须从函数返回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;

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs 数组的问题,forEach [duplicate]

2条答案

相关问题

热门标签

最新问答