关于setstate的问题(重新编辑过)

#1
import React , {Component, PropTypes} from "react" ;
import {Link} from 'react-router' ;
import {connect} from 'react-redux';
import {listProducts,destroyProduct} from "../../actions/productAction";

@connect(state=> {
  return {all: state.product.all,params:state.router.params}
})
export default class ProductList extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.dispatch(listProducts());
  }

  render() {
    const {all} = this.props;
    return <div className="container-wrapper">
        { all.map(item => {
          return <Link to={`/products/${item.id}`} className="item" key={item.id}>
            <div>
              <p>产品名称</p>
              <p>{item.name}</p>
            </div>
          </Link>
        }) }
    </div>;
  }
}

warning.js:44 Warning: setState(...): Cannot update during an existing state transition (such as withinrenderor another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved tocomponentWillMount.

而且非常疑惑的是 为什么url会直接改变。
原先的列表 比如说存在 ProductA ProductB ProductC url分别是 product/a product/b product/c。
但是无论点击哪个 都会跳转到product/a 这个URL。
手动 输入product/b 调试时候发现url 会突然 变成 product/a

#2

有没有大神解说一下~~~~

#3

all.map((x, index) => {
return <TemplateItem onConfirmDestroyTemplate={this.openDeleteModal}
key={index} {…x}/>;
})

试试这种写法

#5

1:Each child in an array or iterator should have a unique “key” prop. Check the render method of TemplateItem.

这个问题应该是 TemplateItem 里面的key设置有问题 需要看 TemplateItem 的代码

#6

#7

templateItem 的代码 截图给你了

#8

是不是footerButtons上面没加key?

#9

不是, footerButton这块注释了 还是会报错同样的错,

其他地方也有类似的代码报 key的问题 但是好像可以继续使用

#10

有没有相关大神帮忙解释一下。

#11

更换了 路由 就不报错了神奇;
原来是 products/:productId/over-view,
我更换成 products/over-view/:productId

然后
return <Link to={`/products/${item.id}/over-view`} className="item" key={item.id}>
这行 我改成
return <Link to={`/products/over-view/${item.id}`} className="item" key={item.id}>

但是不知道原因