對象在將道具從一個組件傳遞到另一個組件時，不能作為反應子對象（帶有鍵的找到的對象）有效

Question

我正在將特定的選定URL（數據）從組件（List.js）傳遞到組件（DD.js），DD.js有兩個組件，Left和Right，我想在Left組件中顯示數據，因此左組件的道具，但我收到錯誤消息

對象作為React子對象無效（找到：帶有鍵{url}的對象）

。 如果要渲染子級集合，請改用數組。

DD.js

export default class DD extends Component {
  render(){
    let data = this.props.location.state
    return(
      <div className="dd-wrapper">
        <div className="left-drawer-wrapper">
          <Left url={data}/>
        </div>
        {/*right side section*/}
      </div>
    );
  }
}

Left.js

export default class Left extends Component{
  render(){
    let url = this.props.url
    return(
      <div>
        {url}
      </div>
    );
  }
}

List.js

<tbody>
 {
   this.state.urls.map( (list,i) => {
   return(
     <tr key={i}>
       <td>
        <Link to={{pathname:`/service/${this.service_name}/requests`,
                        state:{url:this.state.urls[i]}}}
                        onClick={()=>this.selectedUrlHandler(i)}>{list} 
        </Link>
       </td>
       <td>{this.service_name}</td>
      </tr>
     );
   })
  }
</tbody>

當我執行console.log（url）時，我得到了要求的答案，但是當我刪除它並僅執行{url}時，就會發生錯誤，不確定是怎么回事。

Answer 1

由於url傳遞了一個對象到Left組件，該對象試圖呈現該URL，因此會出現錯誤。 而是只渲染state對象的特定屬性，例如

export default class DD extends Component {
  render(){
    let data = this.props.location.state
    return(
      <div className="dd-wrapper">
        <div className="left-drawer-wrapper">
          <Left url={data}/>
        </div>
        {/*right side section*/}
      </div>
    );
  }
}

---

export default class Left extends Component{
  render(){
    let url = this.props.url.value
    return(
      <div>
        {url}
      </div>
    );
  }
}

Answer 2

您不能將對象渲染為react組件中節點的子級。 為此，您可以對對象進行字符串化，即

export default class Left extends Component{
 render(){
  let url = this.props.url
  return(
    <div>
      {JSON.stringify(url)}
    </div>
  );
 }
}

要么

您可以一次從對象渲染特定的值。

export default class Left extends Component{
 render(){
  let url = this.props.url
  return(
    <div>
      {url.url1}
      {url.url2}
    </div>
  );
 }
}

Answer 3

網址不是字符串，它是一個對象，因此無法在JSX中呈現對象。 您可以通過將其轉換為字符串來進行檢查。

<Left url={JSON.stringify(data)} />