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

Question

我正在使用我大学提供的代码进行练习，但它现在抛出错误消息 'invariant violation: text strings must be rendered within a text component' 我什至完全制作了一个新文件运行它与原始代码保持一致但仍然出现该错误。

这突然发生的原因是什么？请问我该如何解决？

谢谢

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" }
  ]
}

Answer 1

试试这个...

建议使用 componentDidMount 进行 api 调用，因为 componentWillMount 已弃用。 reference

代码- 你可以这样导入

import data from './test.json';

export default class App extends React.Component {
  state={
    dataSource:data
  }
 _renderItem = (info) => {
    return <Text>{this.state.dataSource.map((movie, index) => (
        <Text>Hello, {movie.title} from {movie.releaseYear}</Text>
    ))}</Text>
  }

  render() {
    return (
      <View style={{ flex: 1, paddingTop: 20 }}>
        <FlatList
          data={this.state.dataSource}
          renderItem={this._renderItem}
          keyExtractor={({ id }, index) => id}
        />
      </View>
    );
  }
}

Live demo

Answer 2

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

You can test it here

 _renderItem = (info) => {

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

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

invariant violation text strings must be rendered within a text component

reactjs

react-native

react-native-android