来自API的数据呈现为空（数组/对象问题）

威克多·基西列夫斯基

我有一个旨在显示API数据的组件：

class Item extends Component {
constructor(props) {
  super(props);
  this.state = {
    output: []
  }
}

componentDidMount() {
    fetch('http://localhost:3005/products/157963')
      .then(response => response.json())
      .then(data => this.setState({ output: data }));
  }


render() {
    console.log(this.state.output);
  return (
    <ItemPanel>
    <ItemBox>
    <BoxTitle>{this.state.output}</BoxTitle>
  </ItemPanel>
  );
  }
 export default Item;

console.log（this.state.output）返回正确的数据，而我的组件无法渲染，它抛出此错误：

Objects are not valid as a React child (found: object with keys {id, general, brand, images}). If you meant to render a collection of children, use an array instead.

我猜来自api的数据是一个对象。我已经尝试使用JSON.parse或toString（）了：/

这是从控制台输出的：

ish

似乎您正在中显示整个对象<BoxTitle>，让我们尝试在此处显示品牌。我已经更新了给出的代码。将初始状态更新output []为{}

class Item extends Component {
constructor(props) {
  super(props);
  this.state = {
    output: {}
  }
}

componentDidMount() {
    fetch('http://localhost:3005/products/157963')
      .then(response => response.json())
      .then(data => this.setState({ output: data }));
  }


render() {
    console.log(this.state.output);
  const { brand = {name : ""} } = this.state.output // added default name until we get actual value
  return (
    <ItemPanel>
    <ItemBox>
    <BoxTitle>{brand.name}</BoxTitle>
  </ItemPanel>
  );
  }
 export default Item;

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。