Question

我已经开始接受我的动手反应。我有三个组件放在单独的文件中。 mainPage.js list.js和tableDisplay.js是三个不同的文件。在使用reactjs之后我几乎没有怀疑。

mainPage.js的输出作为输入传递给list.js，所以这里 mainPage.js是父，list.js是孩子（如果错误请更正）我似乎。list.js输出作为输入传递给tableDisplay.js，我的疑问是，list.js是作为子组件保留还是充当list.js的父组件
list.js中提取的输出是来自数据库的表。所以我想在tableDisplay.js页面中显示相同的表格，其中Im将所获取的数据存储为对象。但是我收到了错误Objects are not valid as a React child (found: object with keys {Name, Emp.no, Designation, WorkOff}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of tableDispay.那么这个错误是什么意思以及如何克服这个错误广告显示tableDisplay.js

list.js：

    class list extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: false,
            query : '' ,
        };
        this.clickEvent= this.clickEvent.bind(this);
    }

     onChange(e) {
        this.setState({ query : e.target.value });
    }

    clickEvent(event) {
        event.preventDefault();
        this.setState({
            content: true,
        });

         connectDataBase.query(this.state.query, (err, result) => {
           var dataFetched = result;
            this.setState({
                htmlTable: dataFetched,
            });
        })
    }

    render() {
            return (
                <div>                        
                    <div id="listClass">
                    <label> SQL </label>
                    <br />
                    <textarea rows="4" cols="50" onChange={this.onChange.bind(this)} value={this.state.query}> Query </textarea>
                </div>
                <button onClick={this.clickEvent.bind(this)} > Run </button>
                <div id="third" >
                    {this.state.content && <TableDisplay tableData={this.state.htmlTable}/>} 
                </div>
                </div>
            )
        }
    }

export default list;

tableDisplay.js：

    class tableDisplay extends React.Component{
     constructor(props) {
    super(props);
    this.state = {
    }; 
  }
    render(){

        return(
            <div id="tableClass" >
                <label> Result </label>
                <br/>
                {this.props.tableData.map((x,y)=>
                <table key={y}>
                    {x}
                </table>
                )}
                {this.props.tableData};
            </div>
        )
    }
}

export default tableDisplay;

Answer 1

我认为错误就在这一行：

{this.props.tableData};

tableData是一个数组（因为你正在使用map），我们不能render array/object直接在JSX内，删除它将起作用的那条线。

注意：您可以使用join将数组转换为字符串，然后直接打印数据。

使用此：

{this.props.tableData.join(' ')};

我认为表格渲染也存在问题，在表格中您直接放置{x}，但您需要使用一些td/tr来呈现数据。

您需要在状态变量中定义htmlTable和content，content的初始值应为false，一旦您获得数据更新，content值为true

tableData的内容是：

[{Name : 'Sam', Emp.No:'12809', Designation:'Engg.', WorkOff :'UK'}]

将此用于render表：

<table>
    {tableData.map((obj,y) => {
        return  <tr key={obj['Emp.No']}> 
                    {Object.keys(obj).map((x,y) => <td key={y}> {obj[x]} </td>)  
                </tr>
    })}
</table>

将数据从一个组件传递到另一个组件

1 个答案: