第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

數(shù)組映射函數(shù)不返回更新的項目

數(shù)組映射函數(shù)不返回更新的項目

萬千封印 2023-10-14 16:13:22
我面臨一個奇怪的問題(至少對我來說),其中 JS Array 方法map()沒有按照映射回調(diào)邏輯返回更新的數(shù)組。我有以下功能1  handleChange (id){2     this.setState((prevState)=>{3      const todos = prevState.myTodos.map(item => {4        if(item.id === id){5          //console.log("ITEM.id is ",item.id,"id passed is ",id,"status is ",item.completed)6          item.completed = !item.completed7        }8        //console.log("ITEM.id is ",item.id,"id passed was ",id,"new status is ",item.completed)9        return item10      })11      return {myTodos : todos}12    })13  }在此函數(shù)中,我正在更新 App 對象的狀態(tài)。就在第 8 行返回項目之前,我可以記錄輸出并看到 item.completed 已更改,但是當(dāng)回調(diào)返回項目對象時,它不會將更新的項目存儲在todos變量中。任何提示都可能有很大幫助。感謝期待
查看完整描述

2 回答

?
慕雪6442864

TA貢獻(xiàn)1812條經(jīng)驗 獲得超5個贊

您可以嘗試使 if 條件內(nèi)聯(lián),這樣您就不會使用return. 就像是:


handleChange (id){

    this.setState((prevState)=>{

    const todos = prevState.myTodos.map(item => 

            (item.id === id) ? {...item, completed: !item.completed} : item )

    })

}

編輯:此解決方案有效,因為它使用擴展語法返回一個新的 JS 對象{...item, completed: !item.completed}。反過來,這會強制執(zhí)行新的渲染調(diào)用。


查看完整回答
反對 回復(fù) 2023-10-14
?
呼如林

TA貢獻(xiàn)1798條經(jīng)驗 獲得超3個贊

請檢查這個片段


import React, { Component } from "react";

import "./styles.css";


class App extends Component {

  state = {

    myTodos: [

      { id: 1, title: "wake up", completed: false },

      { id: 2, title: "brush", completed: false }

    ]

  };


  handleChange = (id) => {

    this.setState((prevState) => ({

      myTodos: prevState.myTodos.map((todo) => {

        if (todo.id === id) {

          return { ...todo, completed: !todo.completed };

        }

        return todo;

      })

    }));

  };


  render() {

    return (

      <div className="App">

        <h1>TODOS</h1>

        {this.state.myTodos.map((todo) =>

          todo.completed ? (

            <del>

              <p onClick={() => this.handleChange(todo.id)}>{todo.title}</p>

            </del>

          ) : (

            <p onClick={() => this.handleChange(todo.id)}>{todo.title}</p>

          )

        )}

      </div>

    );

  }

}


export default App;

工作 代碼沙盒

問題

  1. 您沒有以真實狀態(tài)返回該對象


查看完整回答
反對 回復(fù) 2023-10-14
  • 2 回答
  • 0 關(guān)注
  • 139 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號