【问题标题】：Cannot read property 'name' of undefined - React Native无法读取未定义的属性“名称” - React Native
【发布时间】：2017-05-25 01:08:40
【问题描述】：

问题

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

我的代码

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();
  }

【问题讨论】：

它指出 this.state.myValue 未定义，请尝试记录它或 loadData 方法的结果，看看您是否获得了预期的正确数据。
我试过了，它输出的正是它应该输出的。我也知道它不是未定义的，因为按钮以正确的名称正确显示。（我会澄清这一点）
我明白了。您可以在 index.ios 中包含代码的第 160 行吗？
这是onPress 行，我刚刚在上面更新了它。这是它所在的 git repo，对混乱的代码感到抱歉。 github.com/pudility/fireClient
如果您有更好的方法来执行此操作（输出未知数量的具有唯一名称的按钮）并且不会提供错误，我会很高兴

标签： reactjs react-native react-jsx react-native-ios react-native-navigation

【解决方案1】：

我用map 函数试过了，它成功了，试试这个：

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

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

【讨论】：