更新

Question

我有一个需要动态呈现的表，因此我处于状态，问题是我不能通过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
    };
    }......

你能帮我吗？

Answer 1

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

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

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

我修复了代码，现在它可以运行了：）

但是我仍然觉得很奇怪，组件的状态是私有的，只能用setState来更改，而不能用子组件的返回来更改。

Answer 2

对我来说，您的代码工作正常。我已经在控制台中尝试过。尝试重新启动服务器。

Answer 3

在组件中的if语句块中，替换为：

product.name.indexOf(this.props.searchText)==-1

使用：

product.name && product.name.indexOf(this.props.searchText) === -1

这将检查name对象中是否有一个名为product的键，然后如果为true，则使用方法indexOf()检查保存在name字段中的字符串。 / p>

数组状态变量不呈现

更新

3 个答案: