Блог

Я передаю конкретный выбранный URL (данные) из компонента (List.js ) компоненту (DD.js ), DD.js имеет два компонента, левый и правый, я хочу отобразить данные в левом компоненте, поэтому передал реквизит левому компоненту, но я получаю сообщение об ошибке:

Объекты недопустимы как дочерний элемент 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} , возникает ошибка, не уверен, что происходит не так.

Поскольку 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>
    );
  }
}
  

Вы не можете отобразить объект как дочерний элемент узла в компоненте 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>
  );
 }
}
  

URL-это не строка, это объект, и react не может отображать объекты в JSX. Вы можете проверить это, преобразовав это в строку.

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