如何在 React Native 中更改 JavaScript 对象数组的属性

Question

我正在使用 Flatlist 渲染几个框。如果 "shapes" 元素的 (属性) "visible" 键为 false（定义为状态），则该框将为空白。我不知道这样做是否正确。

现在我希望当我点击框（包装在 touchableOpacity 中）时，可见值更改为 true 并且图标出现在框上。

我不知道这样做。我不知道我应该在状态中定义可见属性还是稍后动态添加它。

这是我的代码

const { width, height } = Dimensions.get('window')

class App extends Component {
   state = {
      shapes: [
         { id: 1, icon: 'home', color: 'green', visible: false },
         { id: 2, icon: 'creditcard', color: 'red', visible: false },
         { id: 3, icon: 'star', color: 'purple', visible: true },
         { id: 3, icon: 'notification', color: 'blue', visible: false },
      ]
   }

   showShapes = () => {
      for (let e of this.state.shapes) {
         e.visible = true
         console.log(e.visible)
      }
      this.setState({
         // what to write here
      })
   }

   renderItems = ({ item }) => {
      return (
         <TouchableOpacity
            activeOpacity={0.6}
            onPress={this.showShapes}
            style={{ padding: 10, backgroundColor: '#ccc', margin: 15, width: width / 4 }}
         >
            {item.visible && <Icon
               name={item.icon} color={item.color} size={50}
            /> }
         </TouchableOpacity>
      )
   }


   render() {
      return (
         <Fragment>
            <FlatList
               numColumns='2'
               data={this.state.shapes}
               renderItem={this.renderItems}
               keyExtractor={(item) => item.id.toString()}
            />
         </Fragment>
      )
   }
}

希望我清楚。

Answer 1

你做的对！在您的状态中定义 visible 属性，像这样处理点击：

const handleBoxClick = boxId => this.setState(state =>({
    shapes : state.shapes.map((x,i) =>{
        if(x.id !== boxId) return x
        return {...x, visible: !state.shapes[i].visible}
    })
}))

现在使用条件渲染来隐藏那些不可见的框：

return <>{box.visible && <Box box={box} />} </>

Answer 2

首先在 renderItem 你应该传递索引像这样

renderItems = ({ item,index }) => {
      return (
         <TouchableOpacity
            activeOpacity={0.6}
            onPress={()=>this.showShapes(index)}
            style={{ padding: 10, backgroundColor: '#ccc', margin: 15, width: width / 4 }}
         >
            {item.visible && <Icon
               name={item.icon} color={item.color} size={50}
            /> }
         </TouchableOpacity>
      )
   }

然后在 showshapes 中这样做

showShapes = index => {
     let shapes = [ ...this.state.shapes ];
     this.state.shapes.map((shape,key)=>{
       if(shape.id==shapes[index].id){
           shapes[key]={...shapes[key], visible: true};
   }else{
     shapes[key]={...shapes[key], visible: false};

   }
 })

如何在 React Native 中更改 JavaScript 对象数组的属性

How to change JavaScript array of objects' property in react native

javascript

reactjs

react-native

react-native-flatlist

如何在 React Native 中更改 JavaScript 对象数组的 属性

How to change JavaScript array of objects' property in react native

javascript

reactjs

react-native

react-native-flatlist

如何在 React Native 中更改 JavaScript 对象数组的属性