Question

import React from 'react'
import {withProvider} from './TProvider';
import ThreeCardMap from './ThreeCardMap';

const one = Math.floor(Math.random()*21 + 0);
const two = Math.floor(Math.random()*21 + 0);
const three = Math.floor(Math.random()*21 + 0);
const styles = {
    color: 'black'
}
const ThreeCardDisp = (props) => {

    let cardArray;
    if (props.list.cards) {
        props.list.cards.filter(list => list.value_int === one)
        console.log(props.list.cards)
        // props.list.cards = props.list.cards[one];
         cardArray = props.list.cards.map((card) =>{return (<ThreeCardMap value={card.value_int} name={card.name} meaningup={card.meaning_up} meaningdown={card.meaning_rev}/>)})
         cardArray.filter(list => list.value_int === one )
    }
    console.log (cardArray); 
    return (
        <div>
        {props.list ? 
            <div>
                <h1 style={styles}>Three Card Map</h1>
                {cardArray} </div>: 
        <h4>loading</h4>
        }
        </div>

    )


}

export default withProvider(ThreeCardDisp)

嗨，我有一个填充有22个阵列（主要塔罗牌）的对象，并且我试图一次仅映射3张卡片，而不是一次看到所有卡片。我试图使用过滤器，然后映射过滤的值来完成此操作，但无济于事。任何提示或回应都将不胜感激。谢谢！

以下是每个塔罗牌数组的值：

desc: "A youthful figure in the robe of a magician, having the countenance of divine Apollo, with smile of confidence and shining eyes. Above his head is the mysterious sign of the Holy Spirit, the sign of life, like an endless cord, forming the figure 8 in a horizontal position . About his waist is a serpent-cincture, the serpent appearing to devour its own tail. This is familiar to most as a conventional symbol of eternity, but here it indicates more especially the eternity of attainment in the spirit. In the Magician's right hand is a wand raised towards heaven, while the left hand is pointing to the earth. This dual sign is known in very high grades of the Instituted Mysteries; it shews the descent of grace, virtue and light, drawn from things above and derived to things below. The suggestion throughout is therefore the possession and communication of the Powers and Gifts of the Spirit. On the table in front of the Magician are the symbols of the four Tarot suits, signifying the elements of natural life, which lie like counters before the adept, and he adapts them as he wills. Beneath are roses and lilies, the flos campi and lilium convallium, changed into garden flowers, to shew the culture of aspiration. This card signifies the divine motive in man, reflecting God, the will in the liberation of its union with that which is above. It is also the unity of individual being on all planes, and in a very high sense it is thought, in the fixation thereof. With further reference to what I have called the sign of life and its connexion with the number 8, it may be remembered that Christian Gnosticism speaks of rebirth in Christ as a change "unto the Ogdoad." The mystic number is termed Jerusalem above, the Land flowing with Milk and Honey, the Holy Spirit and the Land of the Lord. According to Martinism, 8 is the number of Christ."
meaning_rev: "Physician, Magus, mental disease, disgrace, disquiet."
meaning_up: "Skill, diplomacy, address, subtlety; sickness, pain, loss, disaster, snares of enemies; self-confidence, will; the Querent, if male."
name: "The Magician"
name_short: "ar01"
type: "major"
value: "1"
value_int: 1

Answer 1

.filter返回一个新数组，而不修改您调用它的数组。所以这行

props.list.cards.filter(list => list.value_int === one)

实际上什么也没做。

相反，尝试

let cardArray;

if (props.list.cards) {
    cardArray = props.list.cards.filter(list => list.value_int === one)
    console.log(props.list.cards)
    cardArray = cardArray.map((card) =>{return (<ThreeCardMap value={card.value_int} name={card.name} meaningup={card.meaning_up} meaningdown={card.meaning_rev}/>)})
}

或者，由于map和filter返回新数组，因此您也可以将它们链接在一起：

if (props.list.cards) {
    cardArray = props.list.cards
        .filter(list => list.value_int === one)
        .map((card) => { return (<ThreeCardMap value={card.value_int} name={card.name} meaningup={card.meaning_up} meaningdown={card.meaning_rev}/>) })
}

您还可以通过许多其他方式来安排事物-重要的是使用.filter的结果。

Answer 2

您应该可以通过在slice之前附加map来轻松完成此操作。看起来像这样：

cardArray = props.list.cards.slice(0, 2).map((card) =>{return (<ThreeCardMap value={card.value_int} name={card.name} meaningup={card.meaning_up} meaningdown={card.meaning_rev}/>)})

通过这种方式，您也可以删除过滤器。

编辑：您可以使用filter以同样的方式进行操作。正如尼古拉斯（Nicholas）在回答中提到的那样，slice和filter都返回一个新数组，这是您原来的问题。无论使用哪种格式，都必须通过附加新数组来map。您可以阅读更多的here信息，具体取决于数据集的大小。

映射对象的特定特定数组

2 个答案: