Question

我正在尝试从https://api.myjson.com/bins/q47s3获取Json数据并将其显示在FlatList中。

我正在使用Expo。我使用react-native-tabs-template

开始了一个新项目。

这是我的代码（HomeScreen.js）：

export default function HomeScreen() {
  constructor() {
    super();
    this.state = {
      dataSource: []
    }
  }

  renderItem = ({item}) => {
    return (
      <View>
      <Image source={{uri: item.image}} style={{width: 100, height: 100}}/>
      <View>
        <Text>{item.book_title}</Text>
        <Text>{item.author}</Text>
      </View>
    </View>
    )
  }

  componentDidMount() {
    const url = 'https://api.myjson.com/bins/q47s3'
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        dataSource: responseJson.book_array
      })
    })
    .catch((error) => {
      console.log(error)
    })
  }

  return (
    <View style={{flex: 1}}>
      <View style={styles.header}>
        <View style={styles.searchBarHolder}>
          <Icon name='ios-search' style={{fontSize: 24}} />
          <TextInput placeholder='Search' style={{fontSize: 24, marginLeft: 15}} />
        </View>
      </View>
      <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem}
      />
    </View>
  );
}

HomeScreen.navigationOptions = { 标头：null， };

这是错误日志：

Error: D:\Projects\React Native\fick\screens\HomeScreen.js: Unexpected token, expected ";" (18:16)

  16 | import Icon from 'react-native-vector-icons/Ionicons';
  17 | export default function HomeScreen() {
> 18 |   constructor() {
     |                 ^
  19 |     super()
  20 |     this.state = {
  21 |       dataSource: []

更新

我将export default function HomeScreen() {替换为export default class HomeScreen {
我将最后一个return方法移到了render方法中，所以现在的代码如下：

export default class HomeScreen extends React.Component {
  constructor() {
    super();
    this.state = {
      dataSource: []
    }
  }

  renderItem = ({item}) => {
    return (
      <View style={{flex: 1}}>
        <View style={styles.header}>
          <View style={styles.searchBarHolder}>
            <Icon name='ios-search' style={{fontSize: 24}} />
            <TextInput placeholder='Search' style={{fontSize: 24, marginLeft: 15}} />
          </View>
        </View>
        <FlatList
          data={this.state.dataSource}
          renderItem={this.renderItem}
        />
      </View>

      <View>
      <Image source={{uri: item.image}} style={{width: 100, height: 100}} />
      <View>
        <Text>{item.book_title}</Text>
        <Text>{item.author}</Text>
      </View>
    </View>
    )
  }
  }

  componentDidMount() {
    const url = 'https://api.myjson.com/bins/q47s3'
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        dataSource: responseJson.book_array
      })
    })
    .catch((error) => {
      console.log(error)
    })
  }
      <View style={{flex: 1}}>
        <View style={styles.header}>
          <View style={styles.searchBarHolder}>
            <Icon name='ios-search' style={{fontSize: 24}} />
            <TextInput placeholder='Search' style={{fontSize: 24, marginLeft: 15}} />
          </View>
        </View>
        <FlatList
          data={this.state.dataSource}
          renderItem={this.renderItem}
        />
      </View>

      <View>
      <Image source={{uri: item.image}} style={{width: 100, height: 100}} />
      <View>
        <Text>{item.book_title}</Text>
        <Text>{item.author}</Text>
      </View>
    </View>
    )
  }
  }

  componentDidMount() {
    const url = 'https://api.myjson.com/bins/q47s3'
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        dataSource: responseJson.book_array
      })
    })
    .catch((error) => {
      console.log(error)
    })
  }

但是现在出现一个新错误，知道我做错了吗？：

Error: D:\Projects\React Native\fick\screens\HomeScreen.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (42:6)

  40 |       </View>
  41 | 
> 42 |       <View>
     |       ^
  43 |       <Image source={{uri: item.image}} style={{width: 100, height: 100}}/>
  44 |       <View>
  45 |         <Text>{item.book_title}</Text>

Answer 1

应该是：

class HomeScreen extends React.Component{
  //your code
 render(){
   return()
 }
}
export default HomeScreen;

Answer 2

您使用的是函数而不是类。
您的渲染方法在哪里？（可能不是此错误，但是会因为您没有render方法而产生一个新错误）。

添加类以使用构造函数。

export default class HomeScreen extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          dataSource: []
        }
      }

Answer 3

相应地更新代码

export default class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: []
    }
  }

componentDidMount() {
    const url = 'https://api.myjson.com/bins/q47s3'
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        dataSource: responseJson.book_array
      })
    })
    .catch((error) => {
      console.log(error)
    })
  }



  renderItem = ({item}) => {
    return (
      <View>
      <Image source={{uri: item.image}} style={{width: 100, height: 100}}/>
      <View>
        <Text>{item.book_title}</Text>
        <Text>{item.author}</Text>
      </View>
    </View>
    )
  }

  render(){
  return (
    <View style={{flex: 1}}>
      <View style={styles.header}>
        <View style={styles.searchBarHolder}>
          <Icon name='ios-search' style={{fontSize: 24}} />
          <TextInput placeholder='Search' style={{fontSize: 24, marginLeft: 15}} />
        </View>
      </View>
      <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem}
      />
    </View>
  );
 }

}

如何在React Native / Expo中修复“意外令牌，预期为“;””？

3 个答案: