Javascript 使用ReactJs在表格和模式中显示数据

我是新来的。我想使用Reactjs和Reactstrap制作仪表板，但我有一个问题。我想在表中显示我的数据，并在模式中显示mya所有数据，但只显示表中最后一个数据的数据，这是我的代码

我的数据来自

这是渲染组件

render() {

    const { data, currentPage, todosPerPage } = this.state;

    // Logic for displaying todos

    const indexOfLastTodo = currentPage * todosPerPage;

    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;

    const currentTodos = data.slice(indexOfFirstTodo, indexOfLastTod

    const renderTodos = currentTodos.map((todo, index) => {

        return (

            <tr>

                <td> { index+1 } </td>

                <td> { todo.id.value } </td>

                <td> { todo.name.first } { todo.name.last } </td>

                <td> { todo.email } </td>

                <td> { todo.phone } </td>

                <td> 

                    <Button color="success" onClick={this.toggle}> View </Button>

                </td>

            <Modal isOpen={this.state.modal} toggle={this.toggle} >

                    <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>

                    <ModalBody>

                        <Form>

        <FormGroup>

            <Label for="exampleEmail">Name</Label>

            <Input key= {todo.email} type="email" name="email" id="exampleEmail" disabled value= {todo.name.first} />

        </FormGroup>

        </Form>

                    </ModalBody>

                    <ModalFooter>

                    <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}

                    <Button color="secondary" onClick={this.toggle}>Cancel</Button>

                    </ModalFooter>

                </Modal>
            </tr>

        );            

render（）{
const{data，currentPage，todorpage}=this.state；
//显示TODO的逻辑
const indexOfLastTodo=当前页面*到页面；
const indexOfFirstTodo=indexOfLastTodo-todosparterpage；
const currentTodos=data.slice（indexOfFirstTodo，indexOfLastTod
const renderTodos=currentTodos.map（（todo，索引）=>{
返回(
{index+1}
{todo.id.value}
{todo.name.first}{todo.name.last}
{todo.email}
{todo.phone}
看法
情态标题
名称
做某事{'}
取消
);            

您所说的“但是只显示最后一个数据的数据”是什么意思？我很抱歉我的英语不好。当我单击“查看按钮”查看仅显示表格中最后一个用户数据的用户数据信息时，“但是只显示最后一个数据的数据”是什么意思？我很抱歉我的英语不好。当我单击“查看按钮”时查看仅显示表中最后一个用户的数据的用户数据信息的步骤

render() {

    const { data, currentPage, todosPerPage } = this.state;

    // Logic for displaying todos

    const indexOfLastTodo = currentPage * todosPerPage;

    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;

    const currentTodos = data.slice(indexOfFirstTodo, indexOfLastTod

    const renderTodos = currentTodos.map((todo, index) => {

        return (

            <tr>

                <td> { index+1 } </td>

                <td> { todo.id.value } </td>

                <td> { todo.name.first } { todo.name.last } </td>

                <td> { todo.email } </td>

                <td> { todo.phone } </td>

                <td> 

                    <Button color="success" onClick={this.toggle}> View </Button>

                </td>

            <Modal isOpen={this.state.modal} toggle={this.toggle} >

                    <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>

                    <ModalBody>

                        <Form>

        <FormGroup>

            <Label for="exampleEmail">Name</Label>

            <Input key= {todo.email} type="email" name="email" id="exampleEmail" disabled value= {todo.name.first} />

        </FormGroup>

        </Form>

                    </ModalBody>

                    <ModalFooter>

                    <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}

                    <Button color="secondary" onClick={this.toggle}>Cancel</Button>

                    </ModalFooter>

                </Modal>
            </tr>

        );