Obecnie mam ten działający kod ..

const HomePage = (props) => {
  return (
    <div className="page-home">
      {
        Object.keys(props.data).map(key => (
          <section key={key}>
            <Link to={props.data[key].route}>{props.data[key].title}</Link>
            <Categories collections={props.data[key].collections} />
          </section>
        ))
      }
    </div>
  )
}

Jednak chcę użyć zmiennej, aby uczynić kod bardziej czytelnym, ale zgłasza błąd Parsing error: Unexpected reserved word 'let'

const HomePage = (props) => {
  return (
    <div className="page-home">
      {
        Object.keys(props.data).map(key => (

          // this is the var defintion that causes the problem
          let obj = props.data[key]

          <section key={key}>
            <Link to={obj.route}>{obj.title}</Link>
            <Categories collections={obj.collections} />
          </section>
        ))
      }
    </div>
  )
}

Czy ktoś może wyjaśnić, dlaczego tak się dzieje i jaki byłby właściwy sposób, aby to zrobić?

0
brewster 17 marzec 2020, 00:35

2 odpowiedzi

Najlepsza odpowiedź

Prawidłowe wyrażenie JavaScript można umieścić tylko w nawiasach klamrowych w JSX więc {let arr=[]} jest nieprawidłowy, ponieważ nie jest Wyrażenie ale możesz zrobić deklarację wewnątrz zwykłego bloku kodu javascript { .. };

const HomePage = (props) => {
  return (
    <div className="page-home">
      {
        Object.keys(props.data).map(key => {
          /*
          this is regular JS function body; even-though it is inside JSX but its body of 
          map's callback function so you can put any js code here 
          */

          let obj = props.data[key]
          return (<section key={key}>
            <Link to={obj.route}>{obj.title}</Link>
            <Categories collections={obj.collections} />
          </section>)
        })
      }
    </div>
  )
}

Ale jaki był problem w twoim kodzie? deklarowałeś zmienną wewnątrz operatora grupy () i znowu deklaracja zmiennej nie jest wyrażeniem (sprawdź wszystko Operatory w JS), stąd kompilator wrzeszczy na ciebie.

console.log((1==2)) //no problem valid expression
console.log((1)) //no problem valid expression
console.log((1*2)) //no problem valid expression
console.log((function a(){ return 1}))  //no problem valid expression
(const a = function(){ return 1})  //!!! problem not an expression
2
Mhmdrz_A 16 marzec 2020, 22:21

Masz problem ze składnią, poniższy kod powinien działać.

const HomePage = (props) => {
  return (
    <div className="page-home">
      {Object.keys(props.data).map(key => {

        // this is the added variable causing the issue
        const obj = props.data[key]

        return (
          <section key={key}>
            <Link to={obj.route}>{obj.title}</Link>
            <Categories collections={obj.collections} />
          </section>
        );

      })}
    </div>
  )
}
3
khan 16 marzec 2020, 21:44