Question

我有一家名为＆＃34; Pets＆＃34;它存储以下数组：

[{"id"2,"name":"Cat"},
 {"id":3,"name":"Dog"},
 {"id":4,"name":"Fish"}
]

在我的组件中，我映射了这样的状态:(我使用redux表单和react-bootstrap-table）

class PetsPage extends Component {
    constructor(props) {
      super(props);
      this.state =({
        selected:[]
      });
    this.showRow = this.showRow.bind(this);
  }

  componentWillMount() {
    this.props.fetchPets();
  }


render() {
  const {
    handleSubmit,
    previousPage,
    pets
  } = this.props


  if (!pets){
    return (
      <div className="container">
          <div> Loading...</div>
      </div>
    );
  }

  return (  
      <div className="container">

       <BootstrapTable 
          data={pets} 
          search={true} 
          striped={true}
          hover={true}
          condensed={true}
          selectRow={selectRowProp}>
          <TableHeaderColumn dataField="id" isKey={true}>Pet #</TableHeaderColumn>
          <TableHeaderColumn dataField="name">Company</TableHeaderColumn>
        </BootstrapTable>

          <p> Currently Chosen: <span>  id: {this.state.selected}</span> </p>

          <div className="btn-group">
            <button type="button" onClick={previousPage}  className="btn btn-success btn-lg"><i/> Previous</button>
            <button type="submit" className="btn btn-success btn-lg">Next</button>
        </div>
      </div>
    </form>
    )
  }
}


function mapStateToProps(state) {
  return { pets: state.pets.all };
}

export default reduxForm({
  form: 'wizard',              
  fields,                      
  destroyOnUnmount: false,    
  validate                    
}, mapStateToProps, actions)(PetsPage)

到目前为止，一切都有效。当我打电话给这样的宠物道具时，我的问题出现了：

<p> Currently Chosen: {pets[2].name}</p>

我一直收到这个错误：

TypeError: pets[2] is undefined

理想情况下，我希望能够通过＆＃34;选择＆＃34;提供的ID来调用宠物的名字。状态。

编辑--- 我注意到代码实际工作，如果我去另一个页面并回到这个页面。这有点令人困惑，因为我认为有...装载容器会阻止这种情况发生。

Answer 1

如何获得pets的初始状态？是那些异步检索的？（我怀疑它是）

当您的BootstrapTable初始加载时，异步调用未完成，pets仍未定义，因此出错。然后，当您转到另一个页面并返回此页面时，您的异步调用已完成，pets现在是一个数组，并且可以正常运行。

如果我到目前为止，请在BootstrapTable：

中添加类似内容

if(this.props.pets) {
   <p> Currently Chosen: {pets[2].name}</p>
   ... // render your pets props within the 
} else {
   // render some loading indicator
}

编辑：如果您的宠物被初始化为空阵列，请检查宠物的长度而不是真实值

Answer 2

你不应该这样做.props.pets [2]？或者this.state.pets [2]？不确定究竟发生了什么，但我不认为它自己的宠物[2]会是什么。如果这没有用，你可以发布更多的代码吗？

Answer 3

好的，我刚想通了。根据xiaofan2406的建议，我确实要提出

[{
"id":"11",
"user_id":"8000",
"product":"Shoes A",
"quantity":"1",
"date_open":"2015-01-04",
"paid":"1",
"harvested":"",
"reinvest":null,
"profit":null,
"investment":"3000"
},

{
"id":"12",
"user_id":"8000",
"product":"Shoes B",
"quantity":"1",
"date_open":"2015-03-01",
"paid":"1",
"harvested":"",
"reinvest":null,
"profit":200,
"investment":"1500"
},
{
"total_investment":"4500" // how can I add this here?
}]

因为

if(this.props.pets[0])

永远是真的。

在React / Redux中调用State属性

3 个答案: