为什么我无法渲染标题？

Question

I'm trying to make Tech Stack appear on the top of the iOS simulator. Instead, I'm getting a weird error on both my .js files even though they seem syntactically correct.

The error says: unexpected block statement surrounding arrow body arrow-body-style on both .js files.

I came across this website https://eslint.org/docs/rules/arrow-body-style to get a little more info as well as search SO thoroughly for a solution but couldn't find anything.

(the location of the error is commented in both .js files)

How can I rectify this issue?

Error in simulator:

Here's app.js :

import React from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
import { Header } from './components/common';

const App = () => { // error is on this line
  return (
    <Provider store={createStore(reducers)}>
      <View>
        <Header headerText="Tech Stack" />
      </View>
    </Provider>
  );
};

export default App;

Here's CardSection.js

import React from 'react';
import { View } from 'react-native';

const CardSection = (props) => { // error is on this line
  return (
    <View style={styles.containerStyle}>
      {props.children}
    </View>
  );
};

const styles = {
  containerStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    borderColor: '#ddd',
    position: 'relative'
  }
};

export { CardSection };

Answer 1

It means that block body is not required use concise body, like this:

const App = () => (    // not {, use (
    <Provider store={createStore(reducers)}>
        <View>
            <Header headerText="Tech Stack" />
        </View>
    </Provider>
);

There are two ways of using arrow function [MDN Doc] :

1- Block Body: When using {} and explicitly return is required inside the body, it is useful when you have some js logic like doing some calculation, creating function/variables.

Example:

const Hello = () => {
    const name = 'ABC';
    // other logic
    return (<div> Hello {name} </div>);
}

2- Concise body: When you want to return something directly, use () and return will be not required.

Answer 2

Seems like you have eslint enabled for your project. To get rid of this eslint error you should wrap your App component into brackets like the following

const App = () => (
  <Provider store={createStore(reducers)}>
    <View>
      <Header headerText="Tech Stack" />
    </View>
  </Provider>
)

Curly braces is unnecessary in this case.

Hope it will help.