Question

我仍然是本机反应者，我正在尝试使用计时器制作模态，但出现错误消息说undefined不是对象（评估'_this5.state.error [key]'），我尝试打开使用setTimeout（）的模态，我认为它存在状态问题，有人想解决它吗？谢谢

这是我的代码

class FormInput extends Component {

    constructor(props) {
        super(props);

        const { fields, error } = props;

        this.state = this.createState(fields, error);

        this.state = {
            visible: false
        }

        //bind functions
        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    componentDidMount(){
        this.timer = setTimeout(this.showModal, 5000); //auto reset after 60 seconds of inactivity
    }

    componentWillUnmount(){
        clearTimeout(this.timer);
    }

    showModal() {
        this.setState ({ visible: true})
    }

    closeModal() {
        this.setState ({ visible: false})
    }
    
        createState(fields, error) {
        const state = {};
        fields.forEach((field) => {
            let { key, type, value, mandatory } = field;
            state[key] = { type: type, value: value, mandatory: mandatory };
        })

        state["error"] = error;
        state["submitted"] = false;

        return state;
    }

    
    
    render() {

        return (
                <View>
                    <AlertModal visible={this.showModal} close={this.closeModal}/>
                    </View>

        );

Answer 1

将showModal声明为箭头函数

showModal = () => {
  this.setState ({ visible: true})
}

或为showModal绑定上下文

this.timer = setTimeout(this.showModal.bind(this), 5000)

或

this.timer = setTimeout(() => {this.showModal()}, 5000)

learn more about javascript context this

Answer 2

使JSON_VALUE([value], '$.Name') = N'PassCycle'和showModal成为箭头功能

closeModal

或将它们绑定到构造函数中。

另外showModal = () => { this.setState ({ visible: true }) } closeModal = () => { this.setState ({ visible: false }) }道具是一个布尔值，您正在传递一个函数。通过visible来解决此问题。

this.state.visible

---更新---

因此，在检查了更新的代码之后，我能够弄清问题所在。在构造函数中，您正在这样做

<AlertModal visible={this.state.visible} close={this.closeModal} />

，它会覆盖this.state = this.createState(fields, error); this.state = { visible: false }。因此，我建议您将this.state移至createState函数并将其从构造函数中删除。

反应本机模态错误，评估_this5.state.error [key]

2 个答案: