如何解决 React 问题（TypeError: Cannot read property 'showModel' of null）答案

【问题标题】：How solve React problem (TypeError: Cannot read property 'showModel' of null)如何解决 React 问题（TypeError: Cannot read property 'showModel' of null）
【发布时间】：2021-08-14 07:24:15
【问题描述】：

这里展示了如何设置属性showModel并赋予它false：

Main.js

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
import UserDataModel from './UserDataModel';


class Main extends React.Component {

    constructor(props) {
        super(props);
        this.State = {
            userName: '',
            userHeight: '',
            likeCats: false,
            breed: '',
            showModel: false

        }

    }


    submitForm = async (event) => {
        event.preventDefault();
        let form = event.target;
        await this.setState({

            userName: event.target.userName.value,
            userHeight: event.target.userHeight.value,
            likeCats: event.target.likeCats.checked,
            breed: event.target.breed.value,
            showModel: true
        })
        form.reset();
        console.log(this.state.userHeight, "userNamennnnnnnnnnnnnnnnnnnnnnn");
    }
    handleClose = () => {
        this.setState({
            showModel: false
        })
    }

    render() {
        return (
            <div>
                <h2>Form popup</h2>
                <Form onSubmit={this.submitForm}>
                    <Form.Group className="mb-3" controlId="formBasicEmail">
                        <Form.Label>Name</Form.Label>
                        <Form.Control name="userName" type="text" placeholder="Enter Name" />

                        <Form.Label>Height</Form.Label>
                        <Form.Control type="text" name="userHeight" placeholder="Height" />

                    </Form.Group>


                    <Form.Group className="mb-3" controlId="formBasicCheckbox">
                        <Form.Check name="likeCats" type="checkbox" label="do you love food " />
                    </Form.Group>

                    <Form.Select name="breed" aria-label="Default select example">
                        <option>What is your favorate?</option>
                        <option value="1">Shawrma</option>
                        <option value="2">mansaf</option>
                        <option value="3">shorba</option>
                    </Form.Select>

                    <Button variant="primary" type="submit">
                        Submit
                    </Button>
                </Form>


                <UserDataModel
                    showModel={this.state.showModel}
                    handleClose={this.handleClose}
                    userName={this.state.userName}
                    userHeight={this.state.userHeight}
                    likeCats={this.state.likeCats}
                    breed={this.state.breed}
                />
            </div>
        )
    }
}

export default Main

UserDataModel.js

import React  from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button'

class UserDataModel extends React.Component {
   

    render() {
        return (
            <div>
             <Modal show={this.props.showModal} onHide={this.props.handleClose}>
                    <Modal.Header closeButton>
                        <Modal.Title>Modal heading</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                      
                        <p>{this.props.userName}</p>
                        <p>{this.props.userHeight}</p>
                        <p>{this.props.breed}</p>
                       
                
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={this.props.handleclose}>
                            Close
                        </Button>
                    
                    </Modal.Footer>
                </Modal> 
            </div>
        )
    }
}

export default UserDataModel

【问题讨论】：

showModel:false 是的，你就是这样做的——是你的代码出现错误吗？
我更新了你现在可以看到的问题，我的 main.js 和 UserDataModel.js 代码
你在哪里得到这个错误？
×TypeError: 无法读取 null Main.render src/component/Main.js:81 78 的属性“showModel” 79 | 80 | 81 | showModel={this.state.showModel} | ^ 82 |句柄关闭={this.handleClose} 83 |用户名={this.state.userName} 84 | userHeight={this.state.userHeight}

标签： javascript reactjs react-native react-bootstrap4-modal

【解决方案1】：

在类组件的构造函数中，您使用了大写字母State。改成小写：

constructor(props) {
    super(props);
    this.state = {
        userName: '',
        userHeight: '',
        likeCats: false,
        breed: '',
        showModel: false
    }
}

另外，当您设置state 时，您应该使用spread javascript 语法以不改变整个状态。因此，将您的 setState 更改为：

await this.setState({
    ...this.state,
    userName: event.target.userName.value,
    userHeight: event.target.userHeight.value,
    likeCats: event.target.likeCats.checked,
    breed: event.target.breed.value,
    showModel: true
})

还有：

handleClose = () => {
    this.setState({
        ...this.state,
        showModel: false
    })
}

编辑：

您的代码中存在的另一个问题是您在 Main.js 中传递了 showModel 作为 Modal 组件的道具。但在这一行中，你有 showModal：

 <Modal show={this.props.showModal} onHide={this.props.handleClose}>

所以改成：

 <Modal show={this.props.showModel} onHide={this.props.handleClose}>

a 和 e 之间有区别！

【讨论】：

@monaalobisat 请再次检查答案。
@monaalobisat 让我检查一下。
@monaalobisat 你的submitForm 有效吗？
@monaalobisat 我更新了答案。请检查其EDIT 部分。