当用户选择一个选项但随后将其更改为另一个选项时，React 崩溃而不显示错误

Posted 2023-05-08

【中文标题】当用户选择一个选项但随后将其更改为另一个选项时，React 崩溃而不显示错误

【英文标题】：React crashes without displaying error when user selects one option but then changes it to another option

【发布时间】：2020-12-11 07:15:57

【问题描述】：

当用户选择任何选项时，我的代码正在运行。

但是，当他们选择 'now' 选项然后改变主意并选择 'specific' 选项时，React 崩溃而不显示错误 - 它只是显示白屏。

This problem doesn't occur when the options are selected the other way round - when 'specific' is selected and the user changes their mind and selects 'now' .

When 'specific' is selected a new input is rendered.

代码的简化版本如下：

render() 

let startSelling = values.tickets.map((e,i) => 
    if(e.startSelling == 'specific')
        return(
                <div>                 
                    <DatePicker
                        className="datePicker"
                        timeIntervals=15
                        onChange=event => this.props.setSpecificTime(event, i, 'startSellingTime', values)
                        selected=values.tickets[i].startSellingTime
                        placeholderText='Select Date And Time'
                        showTimeSelect
                        dateFormat="Pp"
                        />
                </div>
        )
    elsereturn <div></div>
)


return (
    <>

        this.state.tickets.map((e, i) => 
            return (
            <div>
                <div>       
                    <select
                        value=values.tickets[i].startSelling
                        onChange=event => this.props.changeSellingTimes(event, i, 'startSelling', 'startSellingTime', values)
                    >
                        <option value='' disabled>Start Selling Tickets</option>
                        <option value="now">Now</option>
                        <option value="specific">Specific Date and Time</option>
                        i===1 ? <option value="whenPreviousSoldOut">When values.tickets[0].ticketType Is Sold Out</option>:<option value="whenPreviousSoldOut" disabled=i==0>When A Previous Ticket Is Sold Out</option>  
                    </select>
                </div>
                startSelling[i]
        </div>
            )
            
        )

    </>

)

我哪里错了？

【问题讨论】：

它是否在您的第一个条件语句中返回了那个空 div (if(e.startSelling == 'specific')？这很容易测试，只需在该 div 中输入“hello”然后再次运行您的应用程序

是的，这有效

找到了。选择“现在”将日期保存为状态中的时刻对象。 Datepicker 在尝试读取它时导致反应崩溃。感谢您的帮助

很高兴你得到它。太糟糕了，没有为你记录错误哈哈。

【参考方案1】：

找到了。选择“现在”将日期保存为状态中的时刻对象。 Datepicker 在尝试读取时导致 react 崩溃。