react-native 中的 clonewithrows 数组问题答案

【问题标题】：clonewithrows array issue in react-nativereact-native 中的 clonewithrows 数组问题
【发布时间】：2016-08-20 20:24:54
【问题描述】：

我正在尝试使用来自 Firebase 的数据在我的 react-native 应用程序中填充 Listview，但目前出现此错误：

“对象作为 React 子对象无效（使用键 {title} 找到对象）。如果您要渲染一组子对象，请改用数组或使用 React 插件中的 createFragment(object) 包装对象。检查'Text'的渲染方法。”

这发生在我调用 clonewithrows 时。目前我对该函数的输入（在解析对 Firebase 的响应之后）是：[ { title: 'New York' }, { title: 'Boston' } ]

这是我的相关代码；如果您发现任何可能导致问题的东西，请告诉我。

const huntsRef = new Firebase(`${ config.FIREBASE_ROOT }/hunts`)


class Home extends Component {
    constructor(props) {
        super(props);
        var conDataSource = new ListView.DataSource(
            {rowHasChanged: (r1, r2) => r1.guid != r2.guid});

        this.state = {
            dataSource: conDataSource
        };
    }

    listenForItems(huntsRef) {

        huntsRef.on('value', (snap) => {
            var hunts = [];
            snap.forEach((child) => {
                hunts.push({
                    title: child.val().title
                });
            });

            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(hunts)
            });
            console.log('datasource' + this.state.dataSource);
        });
    }

    componentDidMount() {
        this.listenForItems(huntsRef);
    }

    renderRow(rowData, sectionID, rowID) {
        console.log("ROWDATA" + rowData);
    }

    render() {

      return (
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      );
    }
}

module.exports = Home;

【问题讨论】：

标签： javascript ios reactjs firebase react-native

【解决方案1】：

正如消息所说，rowData 是 javascript 对象，无法呈现。您可以对 rowData 进行字符串化。例如：

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) => <Text>{JSON.stringify(rowData)}</Text>}
/>

【讨论】：