react native 通过状态管理从渲染函数中读取数组

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