如何在数组中的对象项上设置状态

Question

当心形图标按下它时，我想更新数组对象中关键心形的状态更改为红色，因此为此我使用了本机图标，并且在单击它时使用 heart 和 hearto 进行切换这是代码：state = {                localAdversiment: [            {              title: "Ecloninear 871",              image: require("../../assets/images/truck_image.png"),              year: "2015",              type: "Truck",              status: "new",              price: "$ 2000",              heart: "hearto"            }这里是按下心脏图标时调用的函数 handleFavourite = index => {    const { heart } = this.state.localAdversiment[index];    this.setState(      {        heart: "heart"      }    );  };这是心形图标代码<TouchableOpacity onPress={() => this.handleFavourite(index)}>                <Icon                  name={item.heart}                  type={"AntDesign"}                  style={{ fontSize: 18 }}                />              </TouchableOpacity>请帮助我如何在单击时将心更新为心而不是心

Answer 1

您可以通过以下方法轻松完成

state = {      

          localAdversiment: [

            {

              id: 0,

              title: "Ecloninear 871",

              image: require("../../assets/images/truck_image.png"),

              year: "2015",

              type: "Truck",

              status: "new",

              price: "$ 2000",

              heart: "hearto",

              selected: false

            }

}

现在在 onPress 做这个

handleFavourite = (item) => {

   const { id } = item;

   this.setState({

       localAdvertisement: this.state.localAdvertisement.map((item) => {

         if(item.id === id){

           return {

              ...item,

              selected: !item.selected  

           }

         }

         return item

    })

  })

};

现在像这样渲染

             <TouchableOpacity onPress={() => this.handleFavourite(item)}>

                <Icon

                  name={item.selected ? "heart" : 'hearto'}

                  type={"AntDesign"}

                  style={{ fontSize: 18 }}

                />

              </TouchableOpacity>

希望它会帮助你

Answer 2

编辑此函数如下：

handleFavourite = index => {

    let updatedlocalAdversimentStates = this.state.localAdversiment;

    updatedlocalAdversimentStates[index].heart = "heart";

    this.setState(

      {

        localAdversiment: updatedlocalAdversimentStates

      }

    );

  };