React 不渲染列表

Question

 <List style={{ backgroundColor: '#fff' }} dataArray={this.state.basket}
          renderRow={(item) =>
            <ListItem>
              <Body >
                <Grid>
                  <Col>
                    <Thumbnail source={{ uri: 'https://via.placeholder.com/30' }} />
                  </Col>
                  <Col>
                    <Text>{item.item.name}</Text>
                    <Text note>{item.item.price} $</Text>
                  </Col>
                  <Col>
                    <Text>{item.size} size</Text>
                    <Text>{item.price} $</Text>
                  </Col>
                </Grid>
              </Body>
            </ListItem>              
          }>
        </List>

这里我得到了列表和来自 state.basket 的值，当我 console.log 渲染函数中的状态时输出是：{"5e822cc0daa03047c8ca7ff0": {"item": {"__v": 0, "_id": "5e822cc0daa03047c8ca7ff0", "name": "coke", "price": 5, "quantity": 50}, "price": 15, "size": "3"} 这是正确的输出，我想将每个项目的名称和价格呈现到列表中，但这不起作用，我尝试使用 flatlist 并映射对象也没有用，或者我做了有事吗。这是 this.state 的输出：

{"basket": {"5e822cc0daa03047c8ca7ff0": {"item": [Object], "price": 15, "size": "3"}, "5e839d3b268ce30ef066cb84": {"item": [Object], "price": 50, "size": "2"}}, "isEmpty": false, "loading": false}

我认为问题在于该项目是一个对象，但是当我用谷歌搜索时，我找不到任何有用的东西。感谢您的回答。

Answer 1

由于篮子是一个对象，您仍然可以保持原样并使用 object.keys() 方法遍历它：

 <List style={{ backgroundColor: '#fff' }} dataArray={Object.keys(this.state.basket)}
      renderRow={(key) =>
        <ListItem>
          <Body >
            <Grid>
              <Col>
                <Thumbnail source={{ uri: 'https://via.placeholder.com/30' }} />
              </Col>
              <Col>
                <Text>{this.state.basket[key].item.name}</Text>
                <Text note>{this.state.basket[key].item.price} $</Text>
              </Col>
              <Col>
                <Text>{this.state.basket[key].size} size</Text>
                <Text>{this.state.basket[key].price} $</Text>
              </Col>
            </Grid>
          </Body>
        </ListItem>              
      }>
    </List>

React 不渲染列表

React doesn't rendering list

json

render

list

reactjs