React Redux每个孩子都应该有一个独特的道具错误

时间:2017-08-25 02:04:15

标签: reactjs redux

我在最近4个小时内一直在排除故障但无效,但仍然出现同样的错误。找不到代码有什么问题。

我的代码是从api以正确的方式显示项目但是我做了一些事情并且无法恢复。似乎通过迭代交易项目,但我无法弄清楚。我添加了屏幕截图以简化操作。在这个阶段,任何指导都对我很有帮助。

DealsList.js

// DEALS LIST CLASS
class DealsList extends React.Component{
  componentDidMount(){
    this.props.getDeals()
  }
 render(){
   const dealsList = this.props.deals.map(function(dealsArr){
     return(
       <Col xs={12} sm={6} md={4} key={dealsArr._id}>
         <DealItem _id={dealsArr._id}
           title={dealsArr.title}
           description={dealsArr.description}
           price={dealsArr.price}/>
       </Col>
     )
   })
   return(
     <Grid>
       <Row>
             <Basket />
       </Row>
       <Row>
         <Col xs={12} sm={6}>
           <DealsForm />
         </Col>
         {dealsList}
       </Row>
     </Grid>
    )
  }
}

function mapStateToProps(state){
  return{
    deals: state.deals.deals
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({
    getDeals:getDeals},
    dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(DealsList);`

DealsForm.js

class DealsForm extends React.Component{
  // constructor() {
  //   super();
  //   this.state = {
  //     images:[{}],
  //     img:''
  //   }
  // }

  handleSubmit(){
    const deal=[{
      title: findDOMNode(this.refs.title).value,
      description: findDOMNode(this.refs.description).value,
      price: findDOMNode(this.refs.price).value,
    }]

    this.props.postDeals(deal);
  }

  onDel(){
    let dealId = findDOMNode(this.refs.delete).value;

    this.props.deleteDeals(dealId);
  }
  render(){

    const dealsList = this.props.deals.map(function(dealsArr){
      return (
        <option key={dealsArr._id}>{dealsArr._id}</option>
      )
    })
    return(
      <Well>
        <Row>
          <Col>
            <Panel>
              <FormGroup controlId="title">
                <ControlLabel>Title</ControlLabel>
                <FormControl
                  type="text"
                  placeholder="Enter title"
                  ref="title"/>
              </FormGroup>
              <FormGroup controlId="description">
                <ControlLabel>Description</ControlLabel>
                <FormControl
                  type="text"
                  placeholder="Enter description"
                  ref="description"/>
              </FormGroup>
              <FormGroup controlId="price">
                <ControlLabel>Price</ControlLabel>
                <FormControl
                  type="text"
                  placeholder="Enter price"
                  ref="price"/>
              </FormGroup>
              <Button bsStyle="success" onClick={this.handleSubmit.bind(this)}>Add Deal to shop</Button>
            </Panel>
            <Panel style={{margin:'20px'}}>
                  <FormGroup controlId="formControlsSelect">
                    <ControlLabel>Pick a deal to delete</ControlLabel>
                      <FormControl ref="delete" componentClass="select" placeholder="select">
                        <option value="select">select</option>
                        {dealsList}
                      </FormControl>
                  </FormGroup>
                  <Button onClick={this.onDel.bind(this)} bsStyle="danger">Delete Deal</Button>
            </Panel>
          </Col>
          <Col>
            <Panel>
              <InputGroup>
                <FormControl type="text" ref="image" value="" />
                <DropdownButton
                  componentClass={InputGroup.Button}
                  id="input-dropdown-addon"
                  bsStyle="info"
                  title="Choose Deal Image">
                  {/* {imageList} */}
                </DropdownButton>
              </InputGroup>
              <Image src="" responsive/>
            </Panel>
          </Col>
        </Row>

      </Well>
    )
  }
}

function mapStateToProps(state){
  return {
    deals: state.deals.deals
  }
}
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `DealsForm`. 
    in option (created by DealsForm)
    in DealsForm (created by Connect(DealsForm))
    in Connect(DealsForm) (created by DealsList)
    in div (created by Col)
    in Col (created by DealsList)
    in div (created by Row)
    in Row (created by DealsList)
    in div (created by Grid)
    in Grid (created by DealsList)
    in DealsList (created by Connect(DealsList))
    in Connect(DealsList) (created by RouterContext)
    in div (created by Main)
    in Main (created by Connect(Main))
    in Connect(Main) (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in Provider

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `DealsList`. 
    in Col (created by DealsList)
    in DealsList (created by Connect(DealsList))
    in Connect(DealsList) (created by RouterContext)
    in div (created by Main)
    in Main (created by Connect(Main))
    in Connect(Main) (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in Provider



TypeError: payloadArr.map is not a function
    at totals (heap.js:38548)
    at dealcartReducers (heap.js:38530)
    at combination (heap.js:35759)
    at dispatch (heap.js:16180)
    at heap.js:38567
    at heap.js:38388
    at dispatch (heap.js:35867)
    at heap.js:11235
    at <anonymous>

0 个答案:

没有答案