在 React/Redux 调用状态属性

Question

我有一个名为 "Pets" 的状态的 redux 存储，它存储以下数组：

[{"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)

到目前为止，一切正常。当我这样调用 pets 道具时，我的问题就出现了：

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

我不断收到此错误：

TypeError: pets[2] is undefined

理想情况下，我希望能够通过"selected"状态提供的ID来调用宠物的名字。

编辑--- 我注意到如果我要转到另一个页面并返回到此页面，代码实际上是有效的。这有点令人困惑，因为我认为拥有 ...loading 容器可以防止这种情况发生。

Answer 1

你不应该做 this.props.pets[2] 吗？或者 this.state.pets[2] ？不确定到底发生了什么，但我认为 pets[2] 本身不会有任何意义。如果这没有帮助，你能 post 再写一些你的代码吗？

Answer 2

如何获得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 3

好的，我刚刚弄明白了。按照xiaofan2406的建议，我真的不得不把

if(this.props.pets[0])

因为

if(this.props.pets)

永远是真的。

在 React/Redux 调用状态属性

Calling A State Property in React/Redux

state

properties

reactjs

redux

在 React/Redux 调用状态 属性

Calling A State Property in React/Redux

state

properties

reactjs

redux

在 React/Redux 调用状态属性