Question

我有如下数据：

// items.json    
[
      {
        "key": 1,
        "category": "Fruits",
        "colors": [
          {
            "color": "red",
            "favourite": "apple"
          },
          {
            "color": "orange",
            "favourite": "orange"
          }
        ]
      }, 
      {
        "key": 2,
        "category": "Vegetables",
        "colors": [
          {
            "color": "orange",
            "favourite": "carrot"
          },
          {
            "color": "green",
            "favourite": "celery"
          }
        ]
      }
    ]

但是每个数组中可以有无限数量的对象。我想要做的是首先显示类别，我已经这样做了：

import Items from './items.json';

//，然后在渲染方法中使用它

    render() {
        var items= items;
    return (
         {items.map(item =>
             <TouchableOpacity
                 key={item.key}>
                <Text>
                  {item.category}
                </Text>
             </TouchableOpacity>
          )}
    )
}

现在，当按类别时，我想隐藏类别并显示颜色。然后，当按下颜色时，我想隐藏颜色并显示收藏夹。

我尝试使用if else语句来执行此操作，但是如果替换了数据，它将不起作用，并且正如我所提到的，此json对象可能很大。请帮忙！

Answer 1

您需要：

在组件状态中跟踪所选项目或颜色索引是什么，以便您的渲染功能知道何时重新渲染以及要渲染什么。
通过在您的TouchableOpacity中添加onPress道具并如上所述更新组件状态来处理按下项目时的操作

    state = {
        selectedItemIndex: null,
        selectedColorIndex: null,
    };

    render {
        if (this.state.selectedColorIndex) {
           // return some jsx using this data below:
           // items[this.state.selectedItemIndex].colors[this.state.selectedColorIndex].favourite
        }        

        if (this.state.selectedItemIndex) {
            return (
                {items[this.state.selectedItemIndex].colors.map(color, i) => (
                    {/* return jsx here for colors */}
                )}
            );
        }

        return (
            {items.map((item, i) => (
                 <TouchableOpacity
                     key={item.key} 
                     onPress={() => this.setState({ selectedItemIndex: i })}>
                     <Text>
                         {item.category}
                     </Text>
                 </TouchableOpacity>
          ))}
        )
    }

Answer 2

在您的状态下声明两个数组，一个用于存储原始数据，另一个用于根据按下的项目存储过滤的数据。

state = {
  items: items, // original data
  data: items, // will filter data and display using .map()
  categoryIndex: 0, // index of the selected category
};

在您的onPress中添加TouchableOpacity，并传递所按项目的类型。

{this.state.data.map((item, index) => (
  <TouchableOpacity
    onPress={() =>
      this.onItemPress(
        item.category ? 'category' : item.color ? 'color' : 'favourite',
        index
      )
    }
    key={item.key}>
    <Text>{item.category || item.color || item.favourite}</Text>
  </TouchableOpacity>
))}

onItemPress，基于被按下的项目更新state.data

onItemPress = (type, index) => {
  if (type === 'category') {
    this.setState({
      data: this.state.items[index].colors,
      categoryIndex: index,
    });
  }

  if (type === 'color') {
    this.setState({
      data: [
        {
          favourite: this.state.items[this.state.categoryIndex].colors[index]
            .favourite,
        },
      ],
    });
  }

  if (type === 'favourite') {
    this.setState({
      data: this.state.items,
      categoryIndex: 0,
    });
  }
};

DEMO

使用JSON数据的React-Native条件渲染

2 个答案: