Question

我的应用程序呈现了从另一个网站获取的十二个人。除了我的模态组件之外，其他所有东西都可以正常工作（它应该提供有关您单击的人的更多信息）。出于某种原因，每当我尝试渲染它时，都会出现此错误'Modal.js：9 Uncaught TypeError：无法读取未定义的属性'medium'，并且随之而来的还有更多错误。我正在将Mods组件中的props.modalInfo打印到控制台，它确实包含了我需要的所有信息，但是由于某些原因，它表明在尝试渲染props.modalInfo时未定义。我从未在React中做过模态框（我是初学者）。有人可以解释我如何渲染我的Modal并成功传递所有数据吗？预先谢谢你！

    handleClick(id) {
        this.setState((prevState) => {
            const modalInfoToPass = prevState.employeeList.filter(employee => 
               {
                if(`${employee.name.first} ${employee.name.last}` === id){
                    // get only and only one object that fulfils the 
                    // condition
                    return employee;
                }
            })
            return {
                displayModal: true,
                // update the modalInfo state
                modalInfo: modalInfoToPass

            }
        })  
    }
    render(){
        return (
            <div className='container'>
                <Header />
                <main>
                    {
                        this.state.loading ? <h2 className='load-page'>Loading...</h2> : 
                        this.state.employeeList.map(employee => 
                            <Employee key={`${employee.name.title}
                             ${employee.name.last}`} 
                             employeeInfo={employee}
                             **handleClick={this.handleClick}**
                             />)
                    }
                </main>
                <Footer />
                **{this.state.displayModal && <Modal modalInfo={this.state.modalInfo} />}**
            </div>
        );
    }


function Modal(props) {
    **console.log(props.modalInfo);**
    return (
        <div className='bg-modal'>
            <div className='modal-content'>
                <div className='modal-image'>
                    <img src={props.modalInfo.picture.medium} alt={`${props.modalInfo.name.title} ${props.modalInfo.name.first}`}/>
                </div>
                <div className='modal-info'>
                    <p className='name'>{props.modalInfo.name.first} {props.modalInfo.name.last}</p>
                    <p className='email'>{props.modalInfo.email}</p>
                    <p className='place'>{props.modalInfo.location.city}</p>
                </div>
                <hr />
                <div className='modal-more-info'>
                    <p className='number'>{props.modalInfo.cell}</p>
                    <p className='address'>{`${props.modalInfo.location.street}, ${props.modalInfo.location.state}`}</p>
                    <p className='postcode'>{props.modalInfo.location.postcode}</p>
                    <p className='birthday'>{props.modalInfo.dob.date}</p>
                </div>
            </div>
        </div>
    );
}

Answer 1

什么是id？它在employee上吗？如果不可用，则可以在handleClick中传递要过滤的内容：

 handleClick={()=>this.handleClick(`${employee.name.first} ${employee.name.last}`)}

或者，您可以通过员工：

handleClick={()=>this.handleClick(employee)}

并修改您的处理程序：

handleClick(employee) {
    this.setState({modalInfo: employee,  displayModal: true})      
}

如何渲染我的Modal窗口以及其中包含的所有信息（在React中）？

1 个答案: