无法读取未定义的 属性 'name' - React Native

Question

问题

为什么我在单击导航按钮时出现此错误？

我的代码

render() {
  const { navigate } = this.props.navigation

  var listOfPools = this.state.myValue;
  var output = [];

  for (var i = 0; i < listOfPools.length; i++) {
      console.log(listOfPools[i].name);
      output.push(
        <Button
              onPress={() => navigate('DisplayPools', { name: listOfPools[i].name + 'name',  list: listOfPools[i].imageSrcList } ) }
              title={listOfPools[i].name + ' - ' + i}
              key={i}
        />
      );
  }

  return (
       //works
       <Button
           onPress={() => navigate('DisplayPools', { name: this.state.myValue[0].name,  list: this.state.myValue[0].imageSrcList} ) }
           title={this.state.myValue[0].name}
        />
      //does not work (when I click the button that appears, it displays the buttons perfectly)
      <ScrollView>{output}</ScrollView>
  )
}

会发生什么

它输出所有按钮，名称正确（显示 this.state.myValue 已定义）。然后，当我单击按钮时，会出现以下错误。

应该发生什么

它应该显示按钮的名称（确实如此）并将我引导至 DisplayPools 页面（它在 //working 代码中显示，但在 {output} 代码中不显示）。

错误

第160行（发生错误的地方）

onPress={() => navigate('DisplayPools', { name: listOfPools[i].name + 'name',  list: listOfPools[i].imageSrcList } ) }

我想要完成的事情

我想将数据从我的服务器发送到我的应用程序。然后我想让我的应用显示服务器提供的数据中的链接。

我如何加载数据

我认为这无关紧要，但无论如何：

loadData() {
    fetch('http://localhost:8000/home')
    .then((response) => response.json())
    .then((responseText) => {
      this.setState({ myValue: responseText.pools, loaded: true, });
    })
    .catch((error) => {
      this.setState({ myValues: error, loaded: true, });
    });
  }

和

componentDidMount() {
    this.loadData();
  }

Answer 1

我用 map 函数试过了，它起作用了，试试这个：

listOfPools.map((data, i) => (
      output.push(
        <Button
              onPress={() => navigate('DisplayPools', { name: data.name + 'name',  list: [] } ) }
              title = {data.name}
              key={i}
        />
      )
    ));

您的 imageSource 仍然会遇到问题。看来你还没有设置初始状态。