如何在本机反应中更改对象属性的JavaScript数组答案

【问题标题】：How to change JavaScript array of objects' property in react native如何在本机反应中更改对象属性的JavaScript数组
【发布时间】：2019-07-25 20:10:18
【问题描述】：

我正在使用 Flatlist 渲染几个盒子。如果“shapes”元素的（属性）“visible”键为 false（定义为 state），则该框将为空。我不知道这样做是否正确。

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

我想不通这样做。我不知道我应该在 state 中定义 visible 属性还是稍后动态添加它。

这是我的代码

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>
      )
   }
}

希望我清楚。

【问题讨论】：

标签： javascript reactjs react-native react-native-flatlist

【解决方案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} />} </>

【讨论】：

【解决方案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};

   }
 })

【讨论】：