“JavaScript: Uncaught Invariant Violation: Objects are not valid as a React child” - 在两个相同日期输入中的第二个答案

【问题标题】："JavaScript: Uncaught Invariant Violation: Objects are not valid as a React child" - on second of two identical date inputs“JavaScript: Uncaught Invariant Violation: Objects are not valid as a React child” - 在两个相同日期输入中的第二个
【发布时间】：2020-11-02 09:35:42
【问题描述】：

我在第二次遇到上述错误，看起来（在我看来）相同的代码段！他们都使用标准的 react-datepicker 包。第一：

<div>
    <label>Date Terminated</label>
    <div>
        <DateControl 
            value={this.state.edit_course.date_terminated || null}
            name="date_terminated_course"
            onChange={(e) => this.handleDetailChangeCourse("date_terminated", e.target.value)}
        />
    </div>
</div>

第二：

<div>
    <label>Date Terminated</label>
    <div>
        <DateControl 
            value={this.state.edit_prereq.date_terminated_prereq || null}
            name="date_terminated_prereq"
            onChange={(e) => this.handleDetailChangePrereqs("date_terminated", e.target.value)}
        />
    </div>
</div>

一旦调用了handleDetailChangePrereqs()，就会在渲染过程中发生错误。

两个句柄例程如下所示：

handleDetailChangeCourse(prop, value) {
    if (prop === "date_terminated") {
        console.log(`date: ${value}`)
        console.log(typeof value)
        console.log(JSON.stringify(value))
    }
    const index = this.state.index
    const courses = this.state.temp_courses
    courses[index][prop] = value
    this.setState({ temp_courses: courses });
}

handleDetailChangePrereqs(prop, value) {
    if (prop === "date_terminated") {
        console.log(`date: ${value}`)
        console.log(typeof value)
        console.log(JSON.stringify(value))
    }
    const index = this.state.prereqIndex
    const prereqs = this.state.temp_prereqs
    prereqs[index][prop] = value
    this.setState(() => ({ temp_prereqs: prereqs }));
}

当我运行代码并为第一个控件句柄DetailChangeCourse)() 选择/输入日期时，它工作正常并输出以下内容：

date: 1608069600000
object
"2020-12-15T22:00:00.000Z"

但是当我对第二个控件 handleDetailChangePrereqs() 执行相同操作时，在给我这个输出后它会出错：

date1: 1608069600000
object
"2020-12-15T22:00:00.000Z"

我了解错误消息，并且在此站点上阅读了许多解决方案，其中大多数通常是最终的，他们正在渲染一个对象，而不是他们认为的字符串。我似乎在这两种情况下都在渲染一个对象，但第一个有效。

我花了好几个小时登出各种信息，不知道还能看到什么。在同一程序中还有其他 DateControl 调用，它们也可以正常工作。它是第二个也呈现失败的对象的 .date_terminated 属性（尽管在每种情况下都是一个单独的对象）。

DateControl 组件如下所示：

setDate(selected_date) {
    this.props.onChange({
        target: {
            name: this.props.name,
            value: selected_date
        }
    });
},

render() {
    return (
        <DatePicker
            disabled={this.props.readOnly}
            onBlur={this.props.onBlur}
            style={this.props.style}
            dateFormat="DD/MM/YYYY"
            locale="en-za"
            placeholderText={this.props.readOnly ? "" : "DD/MM/YYYY"}
            selected={this.props.value ? moment(this.props.value): null}
            onChange={(date) => { this.setDate(date) } }
        />
    );
}

【问题讨论】：

你能创建codeandbox并分享吗？
如果能提供上述代码的代码沙箱链接，调试起来会更方便。
好建议。这是我正在做的一个巨大的程序。让我看看我能做什么......将程序转换为沙箱的工作量太大了。将尝试创建一个突出此问题的新沙盒程序。

标签： javascript node.js reactjs react-datepicker

【解决方案1】：

感谢 Shyam 和 Vishal 建议我创建了一个沙盒。在发现问题出在哪里之前，我花了很多时间准备一些代码来做到这一点！

正如我在我的问题中所说：“我理解错误消息，并且阅读了该站点上的许多解决方案，其中大多数通常是最终的，他们正在渲染一个对象，而不是他们认为的字符串。”

我就是这么做的。

问题不在于我在问这个问题之前就决定了，而是在别处：

<table>
...
    <td>
        { item.date_terminated_prereq }
    </td>
...
</table>

从上面的代码段可以看出，我实际上是将更改的日期显示为表格的一部分。它呈现的那一刻我收到了错误消息。

因此，我从中学到的东西是，我在 StackOverflow 上的任何地方都看到过提到这个问题，这是因为“对象”被意外或不知不觉地显示出来。我应该真诚地接受这一点，并在我的代码中将其视为问题，而不是固执地认为错误与有关。

审稿人注意： 我是否应该删除整个问题，因为我的回答更具哲学性而不是实用性？

【讨论】：