时间戳

首页 > 解决方案 > 类型错误：props.users 未定义

reactjs - 类型错误：props.users 未定义

问题描述

我正在尝试使用 BrowserRoute 将用户作为道具发送到另一个页面，即 table.js。但它显示“props.users 未定义”并且它还说“addUser”被分配了一个值但从未使用过

//app.js

import React, { useState } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "./App.css";
import Navbar from "./Components/Layout/Navbar";
import Table from "./Components/pages/Table";
import Home from "./Components/pages/Home";
import About from "./Components/pages/About";

const App = () => {
    const usersData = [
        { id: 1, name: "John", username: "floppydiskette" },
        { id: 2, name: "Brooke", username: "siliconeidolon" },
        { id: 3, name: "Sia", username: "benisphere" }
    ];

    const [users, setUsers] = useState(usersData);

    const addUser = user => {
        user.id = users.length + 1;
        setUsers([...users, user]);
    };

    return (
        <Router>
            <Navbar />
            <div className="container">
                <Switch>
                    <Route exact path="/" render={addUser => <Home {...addUser} />} />
                    <Route exact path="/Table" render={users => <Table {...users} />} />
                    <Route exact path="/About" component={About} />
                </Switch>
            </div>
        </Router>
    );
};

export default App;

//table.js

import React from "react";

const Table = props => (
    <table className="v_artist ">
        <thead>
            <tr>
                <th>Artist</th>
                <th>Name</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {props.users.length > 0 ? (
                props.users.map(user => {
                    return (
                        <tr key={user.id}>
                            <td>{user.name}</td>
                            <td>{user.data}</td>
                            <td>
                                <button className="button muted-button">Edit</button>
                                <button className="button muted-button">Delete</button>
                            </td>
                        </tr>
                    );
                })
            ) : (
                <tr>
                    <td colSpan={3}>No users</td>
                </tr>
            )}
        </tbody>
    </table>
);

export default Table;

表格需要查看数据。当我在表格中添加数据时，应该在表格中查看数据。基本上，我正在尝试进行 CRUD 操作，每个操作都在不同的页面中。

标签： reactjsreact-routerreact-hooksreact-props

解决方案

render={users => <Table {...users} />}

此users变量正在遮蔽由const [users, setUsers] = useState(usersData);. 因此，您所在州的用户根本不会被传递到表中，而传递的只是来自路由器的道具。我会将其重命名为更具代表性的名称，然后还添加代码以传递用户：

render={routeProps => <Table {...routeProps} users={users} />}

至于 addUser，您遇到了同样的问题：您正在隐藏您关心的变量，因此不使用它。

render={routeProps => <Home {...routeProps} addUser={addUser}/>}

推荐阅读