无法读取undefined的属性'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的问题。看来你还没有设置初始状态。