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

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 = {&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; localAdversiment: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: "Ecloninear 871",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image: require("../../assets/images/truck_image.png"),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; year: "2015",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "Truck",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; status: "new",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; price: "$ 2000",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; heart: "hearto",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selected: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}现在在 onPress 做这个handleFavourite = (item) => {&nbsp; &nbsp;const { id } = item;&nbsp; &nbsp;this.setState({&nbsp; &nbsp; &nbsp; &nbsp;localAdvertisement: this.state.localAdvertisement.map((item) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(item.id === id){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...item,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selected: !item.selected&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return item&nbsp; &nbsp; })&nbsp; })};现在像这样渲染&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<TouchableOpacity onPress={() => this.handleFavourite(item)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Icon&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name={item.selected ? "heart" : 'hearto'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type={"AntDesign"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ fontSize: 18 }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TouchableOpacity>希望它会帮助你

Answer 2

编辑此函数如下：handleFavourite = index => {&nbsp; &nbsp; let updatedlocalAdversimentStates = this.state.localAdversiment;&nbsp; &nbsp; updatedlocalAdversimentStates[index].heart = "heart";&nbsp; &nbsp; this.setState(&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; localAdversiment: updatedlocalAdversimentStates&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; );&nbsp; };