首页 > react setState() , 之后数据是对的,,虚拟Dom 也是对的,,但是渲染真实DOM 失败??

react setState() , 之后数据是对的,,虚拟Dom 也是对的,,但是渲染真实DOM 失败??

使用React 渲染列表的时候出现一下错误,有问遇到过么??


 if(good_list.length > 0) {
             GoodsList= good_list.map(good =>
                    <tr>
                        <td>{good.source_ware_id}</td>
                        <td>{good.ware_name}</td>
                        <td>{good.stock_amount}</td>
                        <td>{good.spec}</td>
                        <td>{good.package_spec}</td>
                        <td>
                            <a href="javascript:void(0)" data-id={good.source_ware_id} onClick={this.updateGoods.bind(this)}>编辑</a>
                            <a href="javascript:void(0)" data-id={good.source_ware_id} onClick={this.deleteGoods.bind(this)}>删除</a>
                        </td>
                    </tr>
             )
        }else{
            GoodsList = <tr className="no-data"><td colSpan="6">暂时无记录</td></tr>;
        }
        
        -----------
        
        
        return (
            <div className="content">
                <Filter getGoodsList={this.getGoodsList.bind(this)} />
                <div className="block-item">
                <Table bordered hover>
                    <thead>
                    <tr>
                        <th>商品编码</th>
                        <th>商品名称</th>
                        <th>库存</th>
                        <th>规格</th>
                        <th>箱规</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody className='list-all'>
                    {GoodsList}
                    </tbody>
                </Table>
                </div>
                {standPagination}
            </div>
        )

引用自StackOverflow,有可能是这个原因

It means that the actual DOM is in a different state than the virtual DOM and React is unable to reconcile the two in order to render. Typically this is caused by something ELSE changing the HTML that React is expecting, either a JavaScript error or a different library making changes.

还有,当GoodList为列表的时候,需要给其中的每一个tr都加上key属性。

【热门文章】
【热门文章】