Пример mui-datatables не отображает пример кода - PullRequest
Новая
       34

Пример mui-datatables не отображает пример кода

0 голосов
/ 10 марта 2020

Новое в React и попытка изучения MUI-данных. Пример кода из Codebox , указанного на странице библиотеки библиотеки, не будет отображаться для меня в браузере, и все, что я вижу, это пустая страница. Консоль показывает ноль ошибок.

My HTML: 

<!DOCTYPE html>
    <head>
        <title>MUIDatables Example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">        
    </head>
    <body>
            <div id="root"></div>
        </body>
        <script src="Index0.js" type="text/jsx"></script>
</html>

Ошибки относительно CORS и операторов импорта будут появляться в консоли, если не указано 'type = "text / jsx" ". Я использую сервер http-запроса Node, и он загружает различные файлы в текущем каталоге. На данный момент консоль не показывает ошибок.

JS: 

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";

class App extends React.Component {
  render() {
    const columns = ["Name", "Title", "Location", "Age", "Salary"];

    const data = [
      ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
      ["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"]
// other sample data omitted
    ];

    const options = {
      filterType: "dropdown",
      responsive: "scroll"
    };

    return (
      <MUIDataTable
        title={"ACME Employee list"}
        data={data}
        columns={columns}
        options={options}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

1 Ответ

0 голосов
/ 26 марта 2020

Ваш код выглядит нормально. Просто включите строку в конце: Экспорт приложения по умолчанию; Я копирую / вставляю ваш код и запускаю его. Отлично показывает таблицу. 

import React, {useState, useEffect} from 'react';
import axios from 'axios';

function EditStudentDetails() {
    const [post, setPost] = useState({});
    const id = 1;

    const handleChange = ({target}) => {
        const {name, value} = target;
        setPost({...post, [name]: value});
        console.log(post);
    };

    const handleSubmit = async e => {
        e.preventDefault();

        const editDataById = async () => {
            try {
                const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, {
                    method: 'PUT',
                    body: JSON.stringify({
                        id: id,
                        title: post.title,
                        body: post.body,
                        userId: 1
                    }),
                    headers: {
                        "Content-type": "application/json; charset=UTF-8"
                    }
                })
                    .then(response => response.json())
                    .then(json => console.log(json));
                // latestEdit(response.data);
                console.warn(response.data);
            } catch (error) {
                console.warn(error);
            }
        };
        editDataById();
    };
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-4'>
                    <form onSubmit={handleSubmit}>
                        <div className="form-group">
                            <label htmlFor="name">Title</label>
                            <input type="text" name='title' value={post.title} onChange={handleChange}
                                   className="form-control" id="title"/>
                        </div>
                        <div className="form-group">
                            <label htmlFor="position">Body</label>
                            <input type="text" name='body' value={post.body}
                                   onChange={handleChange} className="form-control" id="body"/>
                        </div>
                        <button type="submit" className="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    )
}

export default EditStudentDetails;
...