0

React 新手并尝试学习 MUI 数据表。库页面上给出的Codebox中的示例代码不会在浏览器中为我呈现，我看到的只是一个空页面。控制台显示零错误。

我的 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>

除非指定了 'type="text/jsx"'，否则有关 CORS 和 import 语句的错误将出现在控制台中。我正在使用 Node http-request 服务器，它确实在当前目录中加载了各种文件。目前控制台没有显示错误。

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"));
4

1 回答 1

0

你的代码似乎没问题。只需在末尾添加一行：export default App; 我复制/粘贴您的代码并运行它。它完美地展示了这张桌子。

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;
于 2020-03-26T20:40:55.660 回答