Ошибка типа: props.users не определен - PullRequest
Новая
       27

Ошибка типа: props.users не определен

0 голосов
/ 28 сентября 2019

Я пытаюсь отправить пользователей в качестве реквизита на другую страницу, например table.js, используя BrowserRoute.Но он показывает «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, каждая операция на отдельной странице.

Ответы [ 2 ]

1 голос
/ 28 сентября 2019 
render={users => <Table {...users} />}

Эта users переменная shadowing переменная, созданная const [users, setUsers] = useState(usersData);.Таким образом, пользователи в вашем состоянии вообще не передаются в таблицу, и все, что передается, - это реквизиты от маршрутизатора.Я переименовал бы это в нечто более репрезентативное, а затем добавил бы в код для передачи пользователей: 

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

Что касается addUser, у вас та же проблема: вы скрываете переменную, которую вызаботиться и, следовательно, не использовать его. 

render={routeProps => <Home {...routeProps} addUser={addUser}/>}
0 голосов
/ 28 сентября 2019

Вы не разделяете переменную users, а распространяете ее.Это означает, что вы берете все его элементы и делаете их доступными как отдельные элементы.

Я считаю, что вы ищете здесь: 

<Table users={users} />

вместо 

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