Reactjs 必须在文本组件中呈现不变的冲突文本字符串

我曾经使用大学提供的代码进行练习，但现在它抛出了错误消息“不变冲突：文本字符串必须在文本组件中呈现”。我甚至完全创建了一个新文件，以使用原始代码重新运行它，但仍然会出现该错误

有没有一个原因，为什么突然发生了这种情况，我如何才能修复它请

多谢各位

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

试试这个

建议对api调用使用

componentDidMount

，因为

componentWillMount

已被弃用

代码- 你可以这样导入

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

从'./test.json'导入数据；
导出默认类App扩展React.Component{
陈述={
数据源：数据
}
_renderItem=（信息）=>{
返回{this.state.dataSource.map（（电影，索引）=>(
你好，{movie.title}来自{movie.releaseYear}
))}
}
render（）{
返回(
id}
/>
);
}
}

试试这个

建议对api调用使用

componentDidMount

，因为

componentWillMount

已被弃用

代码- 你可以这样导入

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

从'./test.json'导入数据；
导出默认类App扩展React.Component{
陈述={
数据源：数据
}
_renderItem=（信息）=>{
返回{this.state.dataSource.map（（电影，索引）=>(
你好，{movie.title}来自{movie.releaseYear}
))}
}
render（）{
返回(
id}
/>
);
}
}

---

主要罪魁祸首是代码中的原语。因为这是react native，所以应该使用而不是

\u renderItem=（info）=>{
返回{this.state.dataSource.map（（电影，索引）=>(
你好，{movie.releaseyar}中的{movie.title}！
))}
}

---

主要罪魁祸首是代码中的原语。因为这是react native，所以应该使用而不是

\u renderItem=（info）=>{
返回{this.state.dataSource.map（（电影，索引）=>(
你好，{movie.releaseyar}中的{movie.title}！
))}
}

---

能否请您共享./assets/test.json文件？您好，我已将其添加到帖子中，谢谢您能否请您共享./assets/test.json文件？您好，我已将其添加到帖子中，谢谢you@Bpt26使用文本标记而不是p标记，因为p是web（reactjs）对于supported和react native，它们有自己的标记。@Bpt26使用文本标记而不是p标记，因为p是web（react JS），对于supported和react native，它们有自己的标记。太好了，它可以工作了！我能问最后一件事吗对不起，是什么让它一遍又一遍地重复数据。我怎样才能阻止这一切？谢谢你完美的工作方式！我能问最后一件事吗对不起，是什么让它一遍又一遍地重复数据。我怎样才能阻止这一切？非常感谢。

 _renderItem = (info) => {

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