javascript - 将 Prop 从一个组件传递到另一个组件时，对象作为 react 子组件(找到带有键的对象)无效

Question

我将特定选定的 URL(数据)从组件(List.js)传递到组件(DD.js)，DD.js 有两个组件，左组件和右组件，我想在左组件中显示数据所以已将 Prop 传递给左侧组件，但我收到错误消息

Objects are not valid as a React child (found: object with keys {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>
    );
  }
}

左.js

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

列表.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 组件，因此您会收到错误。相反，只需渲染 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>
    );
  }
}