React component class, can't write async method?

Question

I'm hazy on async, and I'm not sure why I'm getting a syntax error in my react component while trying to write a simple async method.

class Locations extends React.Component {
  constructor(props) {
    super(props);

    this.searchProducts = this.searchProducts.bind(this);

  }

    async searchProducts(product_name, storeId) {
    let response =  await axios.get(
      `https://api.goodzer.com/products/v0.1/search_in_store/?storeId=${storeId}&query=${product_name}&apiKey=125cbddf3880cb1ba652a7c269ba1eb0`
    );
    console.log(response);
    return response.data.products;

}

  componentWillMount() {
    let products = [];
    this.props.searchLocations(this.props.navigation.state.params.product_name, this.props.navigation.state.params.searchRadius)
      .then(
          products = (this.props.locations.map(
          location => ({[location.id]: this.searchProducts(
            this.props.navigation.state.params.product_name, location.storeid
          )}))
        )
      );

      console.log(products);
  }

  render() {
    const displayLocations = this.props.locations.map(
      location => (<Text key={location.id}>{location.name}</Text>)
    );
    return (
      <View>
        <Text>HELLO</Text>
        <View>{displayLocations}</View>
      </View>
    );
  }
}

I'm getting a syntax error: 'Unexpected token, expected ('.

I don't understand how this is any different than the examples given here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function

At which line does error occur? Note, this.searchProducts() returns a Promise object — guest271314
– guest271314, Commented Oct 15, 2017 at 5:26
That's the babelrc? { "presets": ["babel-preset-expo"], "env": { "development": { "plugins": ["transform-react-jsx-source"] } } } — killer_manatee
– killer_manatee, Commented Oct 15, 2017 at 5:32
Also, I thought using 'await' means that 'response' will not be a promise by the time the function returns? — killer_manatee
– killer_manatee, Commented Oct 15, 2017 at 5:35

guest271314 · Accepted Answer · 2017-10-15 06:19:17Z

2

The syntax error is at

  .then(
      products = /* missing `>` at arrow function */ (this.props.locations.map(
      location => ({[location.id]: this.searchProducts(
        this.props.navigation.state.params.product_name, location.storeid
      )}))
    )
  )

.then() expects a function as argument, this.searchProducts() returns a Promise object, async also need to be set within .map() callback function

async componentWillMount() {
  let products = await this.props
  .searchLocations(
    this.props.navigation.state.params.product_name, 
    this.props.navigation.state.params.searchRadius
  )
  .then(
    () => 
        Promise.all(this.props.locations.map(async(location) =>
          ({[location.id]: await this.searchProducts(
            this.props.navigation.state.params.product_name, 
            location.storeid
          )}))
        )
  );
  console.log(products);
}

edited Oct 15, 2017 at 6:19

answered Oct 15, 2017 at 5:32

guest271314

1

Sign up to request clarification or add additional context in comments.

10 Comments

killer_manatee Over a year ago

I replace my .then() with your revision but I still get Syntax error: await is a reserved word

guest271314 Over a year ago

@killer_manatee See updated post. async needs to be set at the function where await is used, that is, at .map() callback

killer_manatee Over a year ago

Ok, the syntax error is gone. Do you know how I would actually get the result of the Promise.all and store it in the array? What I want is an array of objects with location.id as the key and the result of searchProducts as the value. Thanks

guest271314 Over a year ago

products is the array. Have not tried reactjs, not sure if products should be returned from ComponentWillMount?

killer_manatee Over a year ago

I'm confused about how to access the data that the promise eventually returns. Shouldn't the promise eventually return an array of objects? I've done some reading about promises but I don't understand how to 'get' them when they resolve

|

Jalissa · Accepted Answer · 2017-10-15 13:51:43Z

0

Your componentDidMount function is syntactically invalid. You have not supplied a proper function to the then call. Also, your console.log should be inside the then call.

edited Oct 15, 2017 at 13:51

Jalissa

8869 silver badges12 bronze badges

answered Oct 15, 2017 at 5:30

Deadron

5,2891 gold badge18 silver badges28 bronze badges

Collectives™ on Stack Overflow

React component class, can't write async method?

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related