ReactJS ошибки: "__" не определено и ожидал вызова функции или вызова и вместо этого видел выражение? - PullRequest
Новая
       5

ReactJS ошибки: "__" не определено и ожидал вызова функции или вызова и вместо этого видел выражение?

0 голосов
/ 18 апреля 2020

Как мне устранить эти ошибки в React? Я получаю их при компиляции.

Я думал, что у меня уже были определены категории, и другая ошибка, я не уверен, так как я использую функцию карты - (целью этой функции было реализовать accordian. js страница в основное приложение. js страница).

Приложение. js код: 

import React from 'react'
import Typography from '@material-ui/core/Typography'
import Tabs from './Components/Tabs'
import Accordian from './Components/Accordian'

const data = {
  categories: [
    {
      name: 'Faces',
      subCategories: [{ name: 'Yellow', symbols: ['X', 'O', 'P'] }],
    },
    {
      name: 'Flags',
      subCategories: [
        { name: 'Popular', symbols: ['X', 'O', 'P'] },
        { name: 'Unknown', symbols: ['L', 'Z', 'Q'] },
      ],
    },
    {
      name: 'Numbers',
      subCategories: [
        { name: 'Big', symbols: ['X', 'O', 'P'] },
        { name: 'Small', symbols: ['L', 'Z', 'Q'] },
        { name: 'Random', symbols: ['R', 'T', 'M'] },
      ],
    },
  ],
}

const App = () => {
  const [tabIndex, setTabIndex] = React.useState(0)
  const handleTabChange = (event, newTabIndex) => {
    setTabIndex(newTabIndex)
  }
  return (
    <>
      <div className="App">
        <header className="App-header">Something</header>
        {categories.map((category) => {
          const { name, subCategories } = category
          return subCategories.map((subCat) => {
            ;<Accordian heading={subCat.name} children={subCat.symbols} />
          })
        })}
        <Typography variant="h3">Placeholder_Symbols</Typography>
        <Tabs
          tab={tabIndex}
          tabs={data.categories}
          handleChange={handleTabChange}
        />
      </div>
    </>
  )
}

export default App

Ответы [ 3 ]

0 голосов
/ 18 апреля 2020

Добавьте эту строку кода вверху: import {useState} из'act ';

Внутри приложения const: используйте useState (0) вместо React.useState (0)

0 голосов
/ 18 апреля 2020

Проблема была в функции карты, которая ничего не возвращала. Таким образом вернется 

const data = {
  categories: [
    {
      name: "Faces",
      subCategories: [{ name: "Yellow", symbols: ["X", "O", "P"] }]
    },
    {
      name: "Flags",
      subCategories: [
        { name: "Popular", symbols: ["X", "O", "P"] },
        { name: "Unknown", symbols: ["L", "Z", "Q"] }
      ]
    },
    {
      name: "Numbers",
      subCategories: [
        { name: "Big", symbols: ["X", "O", "P"] },
        { name: "Small", symbols: ["L", "Z", "Q"] },
        { name: "Random", symbols: ["R", "T", "M"] }
      ]
    }
  ]
};

const App = () => {
  return (
    <div className="App">
      <header className="App-header">Something</header>
      {data.categories.map(category => {
        const { name, subCategories } = category;
        return subCategories.map(subCat => (
          <Accordian heading={subCat.name} children={subCat.symbols} />
        ));
      })}
    </div>
  );
};

const Accordian = (prop) => {
  return (
    <div>Accordian {prop.heading} - {prop.children}</div>
  )
};

ReactDOM.render(<App />, document.querySelector("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>
0 голосов
/ 18 апреля 2020

В этом коде есть некоторые ошибки.

  • Когда вы используете карту в категориях, вы забыли сначала поместить данные.
  • Вы забыли; когда вы используете компонент Accordian внутри категорий карт

Проверьте, это новый код и рендер, я попробовал, и он работает: 

import React from "react";
import { Typography } from "@material-ui/core/";
import Tabs from "./Components/Tabs";
import Accordian from "./Components/Accordian";

const data = {
  categories: [
    {
      name: "Faces",
      subCategories: [{ name: "Yellow", symbols: ["X", "O", "P"] }]
    },
    {
      name: "Flags",
      subCategories: [
        { name: "Popular", symbols: ["X", "O", "P"] },
        { name: "Unknown", symbols: ["L", "Z", "Q"] }
      ]
    },
    {
      name: "Numbers",
      subCategories: [
        { name: "Big", symbols: ["X", "O", "P"] },
        { name: "Small", symbols: ["L", "Z", "Q"] },
        { name: "Random", symbols: ["R", "T", "M"] }
      ]
    }
  ]
};

const App = () => {
  const [tabIndex, setTabIndex] = React.useState(0);
  const handleTabChange = (event, newTabIndex) => {
    setTabIndex(newTabIndex);
  };
  return (
    <>
      <div className="App">
        <header className="App-header">Something</header>
        {data.categories.map(category => {
          const { name, subCategories } = category;
          return subCategories.map(subCat => (
            <Accordian heading={subCat.name} children={subCat.symbols} />
          ));
        })}
        <Typography variant="h3">Placeholder_Symbols</Typography>
        <Tabs
          tab={tabIndex}
          tabs={data.categories}
          handleChange={handleTabChange}
        />
      </div>
    </>
  );
};

export default App;
...