reactjs - 必须在文本组件中呈现不变的违规文本字符串

Question

我正在使用我的大学提供的代码进行练习，但它现在抛出错误消息“不变违规：文本字符串必须在文本组件中呈现”我什至完全制作了一个新文件以使用原始代码重新运行它但仍然得到那个错误。

有什么原因会突然发生这种情况吗？请问我该如何解决？

谢谢

import React from 'react';
import { StyleSheet, FlatList, ActivityIndicator, Text, View } from 'react-native';

export default class FetchExample extends React.Component {

  constructor(props) {
    super(props);
    this.state = { isLoading: true }
  }

  componentWillMount () {
       const localMovieData = require('./assets/test.json');

       this.setState({
          isLoading: false,
          dataSource: localMovieData.movies,
        }, function () {

        });
  }

  _renderItem = (info) => {

    return <Text>{this.state.dataSource.map((movie, index) => (
        <p>Hello, {movie.title} from {movie.releaseYear}!</p>
    ))}</Text>
  }

  render() {

    return (
      <View style={{ flex: 1, paddingTop: 20 }}>
        <FlatList
          data={this.state.dataSource}

          renderItem={this._renderItem}
          keyExtractor={({ id }, index) => id}
        />
      </View>
    );
  }
}

JSON数据

{
  "title": "The Basics - Networking",
  "description": "Your app fetched this from a remote endpoint!",
  "movies": [
    { "id": "1", "title": "Star Wars", "releaseYear": "1977" },
    { "id": "2", "title": "Back to the Future", "releaseYear": "1985" },
    { "id": "3", "title": "The Matrix", "releaseYear": "1999" },
    { "id": "4", "title": "Inception", "releaseYear": "2010" },
    { "id": "5", "title": "Interstellar", "releaseYear": "2014" }
  ]
}

标签： reactjsreact-nativereact-native-android

Answer 1

罪魁祸首是代码中的 < p > 原语。由于这是 react-native，应该使用 <Text> 而不是 <p> 。

你可以在这里测试

 _renderItem = (info) => {

    return <View>{this.state.dataSource.map((movie, index) => (
        <Text>Hello, {movie.title} from {movie.releaseYear}!</Text>
    ))}</View>
  }