时间戳

首页 > 解决方案 > 数组状态变量不呈现

reactjs - 数组状态变量不呈现

问题描述

我有一个需要动态渲染的表，所以我输入了 state，问题是我不能通过 state 返回它，只能用forEach函数直接查询：

此代码有效：

render() {
     let rows=[], rows2=[];
        var PRODUCTS = [
        {id:0,category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
        {id:1,category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
        {id:2,category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
        {id:3,category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
        {id:4,category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
        {id:5,category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
          ];
     PRODUCTS.forEach((product)=>{
   if( product.name.indexOf(this.props.searchText)==-1 && this.props.searchText!='')
      {return;}
   if(this.props.inStockOnly){
      if(product.stocked){
           if(product.category=="Sporting Goods"){
            rows.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
            }
           else {
           rows2.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
            }
       }
    }
    else {
         if(product.category=="Sporting Goods"){
          rows.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
          }
         else {
          rows2.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
         }
    }

  })

这不会：

render() {
     let rows=[], rows2=[];
     this.state.products.forEach((product)=>{
   if( product.name.indexOf(this.props.searchText)==-1 && this.props.searchText!='')
      {return;}
   if(this.props.inStockOnly){
      if(product.stocked){
           if(product.category=="Sporting Goods"){
            rows.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
            }
           else {
           rows2.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
            }
       }
    }
    else {
         if(product.category=="Sporting Goods"){
          rows.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
          }
         else {
          rows2.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
         }
    }
  })

它触发此错误：

product.name.indexOf is not a function

更新

这就是我设置状态的方式：

var PRODUCTS = [
        {id:0,category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
        {id:1,category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
        {id:2,category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
        {id:3,category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
        {id:4,category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
        {id:5,category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
          ];

class ProductTable extends React.Component {
  constructor(props)
  {
    super(props)
    this.state={
      products:PRODUCTS
    };
    }......

你能帮助我吗 ？

标签： reactjs

解决方案

正如@AdrianoReptti 在评论中所说，问题出在名称上。

实际上，在另一个组件中，我更改了产品的名称，以便在组件是否有库存时点亮：

 product.name=product.stocked?product.name:<span style={{color:"red"}}>{product.name}</span>;

我修复了代码，现在它运行了:)

但它仍然很奇怪，我认为组件的状态是私有的，只能通过setState子组件的返回而不是通过子组件的返回来更改。

推荐阅读