Question

这是父对象：

import React, { Component } from "react";
import uuid from 'react-uuid';
import Context from "../../context/Context";
import ItemInput from "./input-components/ItemInput";

export default class InputContainer extends Component {
constructor(props) {
    super(props);

    this.state = {
        name: '',
        item: {
            id: '',
            toDo: ''
        },
        listItems: []
    };

    this.onItemChange = this.onItemChange.bind(this);
    this.onItemAdd = this.onItemAdd.bind(this);
}

onItemChange(event) {
    this.setState({
        item: {
            id: uuid(),
            [event.target.name]: event.target.value
        }
    });
}

onItemAdd(event) {
    event.preventDefault();

    const { item } = this.state;
    this.setState({ listItems: [...this.state.listItems, item] });
    document.getElementById('formItem').reset();
}


render() {
    const currentItem = this.onItemChange;
    const addItem = this.onItemAdd;
    const listItems = this.state.listItems;

    return (
        <div className="box">
            <Context.Provider
                value={{ currentItem, addItem, listItems }}
            >
                <DisplayItems />
                <ItemInput />
            </Context.Provider>
        </div>
    );
}

}

项目输入：

import React, { useContext } from "react";
import Context from "../../../context/Context";

export default function ItemInput() {
const { currentItem, addItem } = useContext(Context);

return (
    <form className="item" id="formItem">
        <input
            onChange={currentItem}
            type="text"
            className="newInput"
            name="toDo"
            placeholder="New Task"
            autoComplete="off"
        />
        <button onClick={addItem} className="checkButton">
            <i className="fas fa-check fa-sm"></i>
        </button>
    </form>
);

}

显示项：

import React, { useContext } from "react";
import Context from "../../../context/Context";

export default function DisplayItems() {
const { listItems, removeItem } = useContext(Context);
return (
    <div>
        {listItems.map((item) =>
            <div className="item" key={item.id} >
                <input type="checkbox" />
                <p className="listItem">{item}</p>
                <button
                    className="delete-btn"
                    type="submit"
                    onClick={removeItem.bind(this, item.id)}
                >
                    <i className="far fa-trash-alt fa-sm"></i>
                </button>
            </div>
        )}
    </div>
)

}

当我尝试添加新对象时，控制台给了我这个错误：

<块引用>

未捕获的错误：对象作为 React 子对象无效（找到：对象键为 {id, toDo}）。如果您打算渲染一组孩子们，请改用数组。

据我所知，我的显示项目渲染功能有问题，请问您有什么问题吗？

Answer 1

sudo /usr/share/thingsboard/bin/install/install.sh --loadDemo =================================================== :: ThingsBoard :: (v3.2.0) =================================================== Starting ThingsBoard Installation... Installing DataBase schema for entities... Installing SQL DataBase schema part: schema-entities.sql Installing SQL DataBase schema indexes part: schema-entities-idx.sql Installing DataBase schema for timeseries... Installing SQL DataBase schema part: schema-ts-psql.sql Successfully executed query: CREATE TABLE IF NOT EXISTS ts_kv_indefinite PARTITION OF ts_kv DEFAULT; Loading system data... Unexpected error during ThingsBoard installation! org.thingsboard.server.dao.exception.DataValidationException: User with email 'sysadmin@thingsboard.org' already present in database! at org.thingsboard.server.dao.user.UserServiceImpl$1.validateDataImpl(UserServiceImpl.java:434) at org.thingsboard.server.dao.user.UserServiceImpl$1.validateDataImpl(UserServiceImpl.java:374) at org.thingsboard.server.dao.service.DataValidator.validate(DataValidator.java:44) at org.thingsboard.server.dao.user.UserServiceImpl.saveUser(UserServiceImpl.java:123) at org.thingsboard.server.service.install.DefaultSystemDataLoaderService.createUser(DefaultSystemDataLoaderService.java:454) at org.thingsboard.server.service.install.DefaultSystemDataLoaderService.createSysAdmin(DefaultSystemDataLoaderService.java:142) at org.thingsboard.server.install.ThingsboardInstallService.performInstall(ThingsboardInstallService.java:216) at org.thingsboard.server.ThingsboardInstallApplication.main(ThingsboardInstallApplication.java:44) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:498) at org.springframework.boot.loader.MainMethodRunner.run(MainMethodRunner.java:49) at org.springframework.boot.loader.Launcher.launch(Launcher.java:107) at org.springframework.boot.loader.Launcher.launch(Launcher.java:58) at org.springframework.boot.loader.PropertiesLauncher.main(PropertiesLauncher.java:467) Unexpected error during ThingsBoard installation! ThingsBoard installation failed! 是一个对象，这就是为什么要对你大喊错误做出反应。 React 无法渲染对象。

item

除了 JSX，render 函数中的表达式应该返回一个字符串（或者可以转换为字符串）。所以它应该是这样的

// You previously define item as an object: item: { id: '', toDo: ''}
// So the JSX below result in error
<p className="listItem">{item}</p>

渲染一组对象反应

1 个答案: