Question

我的目的是在一行中绘制5个星星：

constructor(props) {
    super(props);
    this.state = {
        selectedStar: '',
        ...
    };

    this.starsArray = [1, 2, 3, 4, 5] // is used like indexes
}

onStarPress = (index) => {
    console.warn('index = ' + index); // index here is [object Object] instead of 1, 2, 3 ...
    this.setState({
        selectedStar: index
    });
}

renderStars = () => (
    this.starsArray.map((starIndex, i) => (
        <Star
            key = {i}
            color = {this.defineStarColor(starIndex)}
            onStarPress = {(starIndex) => {this.onStarPress(starIndex)}}
        />
    ))
)

当我对索引数组map()做starIndex等于[object Object]而不是1、2、3 ...

i与key等于1、2...。但是当我将其传递给下面的函数时，它也变成[object Object]

我做错了什么？

Answer 1

不确定Star是如何调用您的函数的，但是如果它只是将给定的函数用作事件处理程序，那么您将接收事件对象作为您的第一个参数。因此，这是一个对象。

如果希望它传递索引，请让Star组件处理DOM事件，然后使用期望的参数调用提供的函数。

Answer 2

在onStarPress = {(starIndex) => {this.onStarPress(starIndex)}}行中，第一个starIndex是事件处理对象。因此onStarPress正在接收对象。

有两种解决方法：

onStarPress = (e,index) => {
    console.warn('e = ' + e); 
    console.warn('index = ' + index); 
    this.setState({
        selectedStar: index
    });
}

renderStars = () => (
    this.starsArray.map((starIndex, i) => (
        <Star
            key={i}
            color={this.defineStarColor(starIndex)}
            onStarPress={(e) => { this.onStarPress(e,starIndex) }}
        />
    ))
)

其他方法是：

onStarPress = (index) => (e) => {
    console.warn('e = ' + e); 
    console.warn('index = ' + index); 
    this.setState({
        selectedStar: index
    });
}

renderStars = () => (
    this.starsArray.map((starIndex, i) => (
        <Star
            key={i}
            color={this.defineStarColor(starIndex)}
            onStarPress={this.onStarPress(starIndex)}
        />
    ))
)

数组map（）接收[object Object]而不是item

2 个答案: