將數據從一個組件傳遞到另一個組件

我已經開始接受我的動手反應。我有三個組件放置在單獨的文件中。 mainPage.jslist.js和tableDisplay.js是三個不同的文件。與reactjs合作後，我幾乎沒有疑問。將數據從一個組件傳遞到另一個組件

從mainPage.js的輸出作爲輸入到list.js過去了，所以這裏 mainPage.js是家長和list.js是孩子（如果錯了請糾正我）.Likewise，list.js輸出作爲輸入tableDisplay.js傳遞，我的疑問是，list.js是否仍然是子組件或作爲list.js的父組件。
list.js中提取的輸出是來自DB的表格。所以我試圖在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;

來源

2017-05-14 devanya

我認爲錯誤在這一行：

{this.props.tableData};

tableData是一個數組（因爲您正在使用該地圖），並且我們不能render任何array/object直接在JSX之內，刪除該行它將工作。

注意：您可以使用join將數組轉換爲字符串，然後您可以直接打印數據。

使用此：

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

我覺得這是有桌子的渲染也，內表，你直接把{x}一個問題，但你需要使用一些td/tr來呈現數據。

您需要定義htmlTable和content在狀態變量的content初始值應該是假的，一旦你得到的數據更新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>

來源

2017-05-14 18:35:08

即時得到錯誤'遺漏的類型錯誤：無法讀取屬性undefined'的 '加入'。另外我不能看到表格，而是在屏幕上打印'[object object]'.. – devanya

你能顯示'tableData'包含什麼嗎？ –

{姓名：'Sam'，Emp.No:'12809'，名稱：'Engg。'，WorkOff：'UK'}這是我在表格中的內容。 – devanya

將數據從一個組件傳遞到另一個組件

回答

相關問題