reactjs - 无法读取未定义的属性“名称”-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();
  }

score 2 · Accepted Answer

我用map函数尝试过，它有效，试试这个：

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

您仍然会遇到imageSource. 看来您还没有设置初始状态。