Question

我在React Native中从API获取此JSON响应。

[
    {
        "cloth_image": "https://ox0%3es",
        "id": 7,
        "big_cloth_type": "t"
    },
    {
        "cloth_image": "https://qM%3D&",
        "id": 8,
        "big_cloth_type": "t"
    },
    {
        "cloth_image": "https://qM%",
        "id": 9,
        "big_cloth_type": "o"
    },
    {
        "cloth_image": "https://qD&",
        "id": 10,
        "big_cloth_type": "s"
    }
]

上面的响应存储为Redux的this.props.clothesList。

我想要做的是，如果数组中big_cloth_type的对象是t，我想将它们分配给相应的屏幕。（在这种情况下，它是TopScreen）

从代码中，（这是render（）函数）

<View style={{flex: 1}}>
        <Tabs initialPage={0}>
          <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Tops</Text></TabHeading>}>
            <TopScreen clothes={blahblah}/> <----- here I want to pass objects with 't' type to this Screen.
          </Tab>
          <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Outers</Text></TabHeading>}>
            <OutwearScreen clothes={blahblah} /> <--- here the objects with 'o'
          </Tab>
          <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Bottoms</Text></TabHeading>}>
           <BottomScreen />
          </Tab>
          <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Shoes</Text></TabHeading>}>
            <ShoeScreen />
          </Tab>
          <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>ETC</Text></TabHeading>}>
            <EtcScreen />
          </Tab>
        </Tabs>
        <FABs
          active={this.state.active}
        />
      </View>

到目前为止，我无法提出任何解决方案。：（

对于评论的建议，我发布了我的减速机

export default function(state = INITIAL_STATE, action) {
  switch (action.type) {
    case CLOTHES_LIST_SUCCESS:
      return { ...state,  clothesList: action.payload }
    case CLOTHES_LIST_FAIL:
      return { ...state, }
    default:
      return state;
  }
}

Answer 1

我想你可以做的是在reducer上过滤数组，如果你想存储它，或者在渲染之前过滤

const filteredList = this.props.clothesList.filter((item) => item.big_cloth_type === "t"))

您可以使用此列表显示已过滤的内容

更新：这里的示例是在渲染函数上使用过滤器。这里需要注意的是在组件上应用关键参数，该组件是每个项目的父项。 React正在使用key参数从shadow DOM中决定是否需要更改项目。

您可以在原来的facebook反应页here

上找到有关它的更多信息

render() {

    const filteredList = this.props.clothesList.filter((item) => item.big_cloth_type === "t"))

    return (
        <View>
            {filteredList.map((item) => (
                <Text key={item.id}>item.name</Text>
            ))}
        </View>
    );

}

Answer 2

假设您正在使用带有redux的容器/组件方法，最好对容器中的API响应进行操作并将其作为props传递给组件

例如：

<View style={{flex: 1}}>
        <Tabs initialPage={0}>
          <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Tops</Text></TabHeading>}>
            <TopScreen clothes={this.props.tops}/> <----- here I want to pass objects with 't' type to this Screen.
          </Tab>
          <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Outers</Text></TabHeading>}>
            <OutwearScreen clothes={this.props.outerwear} /> <--- here the objects with 'o'
          </Tab>
          <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Bottoms</Text></TabHeading>}>
           <BottomScreen />
          </Tab>
          <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Shoes</Text></TabHeading>}>
            <ShoeScreen />
          </Tab>
          <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>ETC</Text></TabHeading>}>
            <EtcScreen />
          </Tab>
        </Tabs>
        <FABs
          active={this.state.active}
        />
      </View>

export default connect（mapStateToProps）（ClothesComponent）

现在在您的ClothesComponent中，如前所述，您可以

iter_rows()

在容器中进行数据操作，而不是组件具有优势。主要是它使你的组件“哑”，即它只使用给定的数据而不是其他任何东西进行渲染。

我建议您阅读React with Redux和smart vs dumb components by Dan。这应该清除很多东西！

将道具分发到每个屏幕

2 个答案: