Question

我是reactjs的新手，并试图通过解析json对象来构建一个基本的ui。

class App extends Component {

  state ={
    products : []
  };
render() {
    return (
      <div>
        <Form onSubmit = {this.addNewProducts}/>
        <ProductList products = {this.state.products} />
      </div>
    );
  }
}

const ProductList =(props) => {

  return(
    <div>
      {props.products.map(product => <Product {...product}/>)}
    </div>
  );
}

尝试从json渲染一些数据，这是我正在努力的地方。试图使用Map但没有运气，至少我没有正确使用它。

const Product = (props) => {
  return(
    <div>
      <div>
        {props.pludetails}</div>
    </div>
  );
};

返回JSON对象：

{
    "ResultCode": 0,
    "ResultDescription": "Success",
    "pludetails": [
        {
            "UPC": 490000129,
            "ItemDesc": "SPRITE",
            "Department": 197,
            "Price1": 7.99,
        }
    ]
}

Answer 1

现在你只需将js对象渲染为React子对象，但是你需要为pludetails编写渲染函数。

这是一个简短的例子：

const Pludetails = (props) => {
 return(
   <div>
    <span>{props.UPC}</span>
    <span>{props.ItemDesc}</span>
    <span>{props.Department}</span>
    <span>{props.Price1}</span> 
   </div>
 );
}

在Product：

const Product = (props) => {
  return(
    <div>
      <div>
        {props.pludetails.map((item, i) => <Pludetails key={i} {...item}/>)}
      </div>
    </div>
  );
};

在ProductList添加关键道具，以减少key错误：

const ProductList =(props) => {

  return(
    <div>
      {props.products.map((product, i) => <Product key={i} {...product}/>)}
    </div>
  );
}

按键使用索引宽度动态数据是危险的。您可以使用id或其他您不喜欢的内容。

在reactjs中解析JSON对象

1 个答案: