Reactjs 反应类型脚本-''；预期的。ts（1005）

我正在用

Graphql

在

React

应用程序中使用

Typescript

我得到一个错误：

“，”预期值。ts（1005）

我找到的唯一答案是typescript已经过时了，但我使用的是3.7.2

user@3df41 ~/Desktop/34534/client (master) $ tsc -v
Version 3.7.2
user@3df41 ~/Desktop/34534/client (master) $    

错误发生在第

data.recipe.map行（recipe=>

import React from 'react';
import './App.css';

import { useQuery } from 'react-apollo-hooks';
import { GET_ALL_RECIPES } from '../queries';
import { RecipeData } from '../generated/RecipeData';

const App: React.FC = () => {

  const { data, loading } = useQuery<RecipeData | null>(GET_ALL_RECIPES, {
    suspend: false
  })

  if (loading || !data) return <div>Loading</div>

  return (
    <div className="App">
      <ul>
        if(RecipeData.recipe !== null){
          {
            data.recipe.map(recipe =>
              <li>{recipe.name}</li>
            )
          }
        }
      </ul>
    </div>
  );
}

export default App;

---

不能将语句放在JSX大括号中，只能放在表达式中。可以将

if

语句替换为内联

&

表达式

  return (
    <div className="App">
      <ul>
        {
          RecipeData.recipe !== null && data.recipe.map(recipe =>
            <li>{recipe.name}</li>
          )
        }
      </ul>
    </div>

返回(

{
RecipeData.recipe！==null&&data.recipe.map（recipe=>
{recipe.name}
)
}

您不能将语句放在JSX大括号中，只能放在表达式中。您可以将

if

语句替换为内联

&

表达式

  return (
    <div className="App">
      <ul>
        {
          RecipeData.recipe !== null && data.recipe.map(recipe =>
            <li>{recipe.name}</li>
          )
        }
      </ul>
    </div>

返回(

{
RecipeData.recipe！==null&&data.recipe.map（recipe=>
{recipe.name}
)
}