1

我是新来的反应。我想使用 Reactjs 和 Reactstrap 制作仪表板，但我遇到了问题。我想在表格中显示我的数据并以模态显示所有数据，但只显示表格中最后一个数据的数据，这是我的代码。

我的数据来自https://randomuser.me/api/?results=50

componentDidMount()

    fetch("https://randomuser.me/api/?results=50")

    .then((Response) => Response.json())

    .then((findresponse) => {

        this.setState({

            data: findresponse.results

        })

    })

这是渲染组件

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>

        );
4

0 回答 0