Question

我正在尝试以卡的形式呈现数据数组。但是，一次只能将一项渲染为单张卡片。用户更新卡号后，将显示下一项。我无法在渲染函数中明智地调用数组项。

列表的地图功能不适用于我，因为它将填充整个数组，但我希望用户在下一个项目之前输入。

此数据是通过API调用保存的

data = [
  { id: 1, text: 'Card #1', uri: 'https://images.unsplash.com/photo-1535591273668-578e31182c4f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f28261f0564880c9086a57ee87a68887&auto=format&fit=crop&w=500&q=60' },
  { id: 2, text: 'Card #2', uri: 'https://images.unsplash.com/photo-1535576434247-e0f50b766399?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=232f6dbab45b3f3a6f97e638c27fded2&auto=format&fit=crop&w=500&q=60' },
  { id: 3, text: 'Card #3', uri: 'https://images.unsplash.com/photo-1535565454739-863432ea3c0e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7edfb9bc7d214dbf2c920723cb0ffce2&auto=format&fit=crop&w=500&q=60' },
];

这是数据数组。现在来自渲染功能：

renderCard() {
    const buttons = ['Call', 'Fold', 'Raise']
    const selectedIndex = this.state.selectedIndex
    return (
      <Card
        title="Profiling Question "
        image={{ uri: this.state.data[selectedIndex].uri }}
      >
        <Text style={{ marginBottom: 10 }}>
          {this.state.data[selectedIndex].text}
        </Text>
        <Button
          onPress={this.updateIndex}
        />
      </Card>
    );
  }

UpdateIndex函数更新索引值。一切正常。

我希望单张卡片可以通过按钮呈现，以更新为下一张卡片。

但是我遇到此错误：

TypeError: undefined is not an object(evaluting'this.state.data[selectedIndex].uri')

编辑：

我也尝试过删除索引以进行如下检查：

return (
      <Card
        title={"Question No: "+ this.state.selectedIndex +1 }
        image={{ uri: this.state.data[0].question_image }}
      >
        <Text style={{ marginBottom: 10 }}>
          {this.state.data[0].question_text}
        </Text>
        <Button
          onPress={this.updateLn}>
          <Text> Update Question </Text>
        </Button>
      </Card>
    );

仍然是相同的错误。

我的状态是：

export default class QuizScreen extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      selectedIndex: 0,
      dataLength: 0,
      cardIndex: 0,
    };
    this.updateIndex = this.updateIndex.bind(this)
    this.updateLn = this.updateLn.bind(this)
  }```

Answer 1

我在这里看到一个大错误

首先，您说所选索引是状态

const selectedIndex = this.state

但是从州获得data后

image={{ uri: this.state.data[selectedIndex].uri }}

因此selectedIndex不是数组索引，它将是某些对象，例如

{
    ...anyThing
    data = [...]
}

您不能将对象用作数组的键。这就是为什么您得到此错误。

为帮助我们满足您的需求，请向我们展示其余代码，以便我们更好地了解您的this.state中的内容。

Answer 2

const data= [
  { id: 1, text: 'Card #1', uri: 'https://images.unsplash.com/photo-1535591273668-578e31182c4f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f28261f0564880c9086a57ee87a68887&auto=format&fit=crop&w=500&q=60' },
  { id: 2, text: 'Card #2', uri: 'https://images.unsplash.com/photo-1535576434247-e0f50b766399?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=232f6dbab45b3f3a6f97e638c27fded2&auto=format&fit=crop&w=500&q=60' },
  { id: 3, text: 'Card #3', uri: 'https://images.unsplash.com/photo-1535565454739-863432ea3c0e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7edfb9bc7d214dbf2c920723cb0ffce2&auto=format&fit=crop&w=500&q=60' },
];

renderCard() {
    const buttons = ['Call', 'Fold', 'Raise']
    const selectedIndex = this.state
    return (
      <Card
        title="Profiling Question "
        image={{ uri: this.data[selectedIndex].uri }}
      >
        <Text style={{ marginBottom: 10 }}>
          {this.data[selectedIndex].text}
        </Text>
        <Button
          onPress={this.updateIndex}
        />
      </Card>
    );
  }

you set data into const data array but retrieving from state data 
output undefined
replace with this.state.data[0].uri to this.data[0].uri

通过React Native中的状态管理从渲染功能读取数组

2 个答案: