类型错误：props.users 未定义答案

【问题标题】：TypeError: props.users is undefined类型错误：props.users 未定义
【发布时间】：2020-01-28 12:02:15
【问题描述】：

我正在尝试将用户作为道具发送到另一个页面，即使用 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 操作，每个操作都在不同的页面中。

【问题讨论】：

标签： reactjs react-router react-hooks react-props

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

您不是在共享 users 变量，而是在传播它。这意味着您将获取其所有元素并将它们作为单独的元素提供。

我相信您在这里寻找的是：

<Table users={users} />

而不是

<Table {...users} />

【讨论】：