Kioshilol Ответов: 1

Не могу отображать данные с помощью reactjs

Как я могу отображать свои данные с помощью reactJS? что я сделал не так?

Что я уже пробовал:

Контроллер

<pre>public class EmployeeController : Controller
{
    private IUnitOfWork _dataBase;
    private IMapper<Employee, EmployeeViewModel> _employeeMapper;

    public EmployeeController(IUnitOfWork dataBase, IMapper<Employee, EmployeeViewModel> employeeMapper)
    {
        _dataBase = dataBase;
        _employeeMapper = employeeMapper;
    }

    public ActionResult Index()
    {
        return View();
    }

    public JsonResult Get()
    {
        var employees = _dataBase.Employees.GetAll();
        var employeesVM = new List<EmployeeViewModel>();

        foreach (var employee in employees)
        {
            var employeeVM = _employeeMapper.Map(employee);
            employeesVM.Add(employeeVM);
        }

        return Json(employeesVM, JsonRequestBehavior.AllowGet);
    }
}


JSX
<pre>class Employee extends React.Component {

    constructor(props) {
        super(props);
        this.state = { employees: props.employee };
    }

    render()  {
        return <div>
                <p>{this.state.employees.Name}</p>
               </div>;   
    }
}

class Employees extends React.Component {

    constructor(props) {
        super(props);
        this.state = { employees: [] };
    }
    
    render() {

        return <div>
            {
                this.state.employee.map(function (employee) {

                    return <Employee employee={employee} />
                        <p>Hello</p>
                })
            }
        </div>;
    }
}
    
    
    ReactDOM.render(
        <Employees url="/employee/getall" />,
        document.getElementById("content")
);


Смотреть

<pre>@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}



    <html>
    <head>
        <title>Employee</title>
    </head>
    <body>
        <div id="content"></div>
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
        <script src="@Url.Content("~/Scripts/employee.jsx")"></script>
        <script src="~/Scripts/react/react.min.js"></script>
    </body>
    </html>

1 Ответов

Рейтинг:
6

Afzaal Ahmad Zeeshan

Такого рода проблемы обычно возникают в React, не о чем беспокоиться. Я немного изменил ваш код и запустил его в своей собственной среде, и он работает просто отлично.

Вот несколько предложений, которые я хочу сделать, чтобы исправить ваш код React. Прежде всего, JSX должен быть заключен в маленькие скобки перед оператором return, иначе вы столкнетесь с автоматической вставкой точки с запятой; читайте этот[^] подробнее об этом.

Таким образом, большая часть вашего кода станет из, 

render()  {
    return <div>
            <p>{this.state.employees.Name}</p>
           </div>;   
}
К, 
render()  {
    return (<div>
            <p>{this.state.employees.Name}</p>
           </div>);
}
Это позволит решить проблемы с правильным возвратом объекта. Во-вторых, если вы сталкиваетесь с такими проблемами, как "неожиданный токен '<'", это означает, что ваш JavaScript не обрабатывается как ES6, и JSX там не будет работать. Вам нужно подать заявление type="text/babel" к элементам скрипта, импортирующим код React. Такие как, 
<script type="text/babel">
class Employees...

ReactDOM...
</script>
Это поможет браузерам проанализировать содержимое и убедиться, что оно действительно. Вот код, который я в настоящее время использую для вашего приложения, и он отображает имена сотрудников. 

// Employees.js
// I am using separate files for each component; a good practice!
import React from "react";
import Employee from "./Employee";

class Employees extends React.Component {
    constructor(props) {
        super(props);
        this.state = { employees: [ { Name: "Someone" }, { Name: "Else" }, { Name: "Working" }, { Name: "Here" } ] };
    }
    
    render() {
        return (
            <div>
            {
                this.state.employees.map(function (employee) {
                  return (<Employee employee={employee} />)
                })
            }
            </div>);
    }
}

export default Employees;

// Employee.js
import React from "react";

class Employee extends React.Component {

    constructor(props) {
        super(props);
        this.state = { employee: props.employee };
    }

    render()  {
        return (<div>
                  <p>{this.state.employee.Name}</p>
               </div>);
    }
}

export default Employee;

// App.js
function App() {
    return (<Employees />); 
}

// index.js
ReactDOM.render(<App />, document.getElementById('root'));
Это поток приложения, которое я использовал, и оно работало просто идеально. Вы также можете попробовать те же функции в CodePen, поскольку их Редактор React обычно работает просто отлично. https://codepen.io/pen/

Да, и функция загрузки данных из Ajax должна быть реализована помимо React, React - это не фреймворк Вы можете попробовать jQuery Ajax, чтобы загрузить контент из React, а затем перевести его в состояние React components.

Видеть эта ссылка.[^]

Kioshilol

но как я могу передать данные из contrroller, чтобы компонент реагировал??

Afzaal Ahmad Zeeshan

Я упомянул часть Ajax в ответе, сделал вызов контроллеру, получил данные в асинхронном запросе, а затем либо установил состояние, либо создал новый компонент. Пожалуйста, прочтите ссылку, которой я поделился.