我需要一個handleDelete過濾器函式來回應onclick按鈕。我可以為一個物件陣列撰寫代碼，但這是一個物件物件

這是來自 API fetch 的回應

Object
0: {id: 'rec6d6T3q5EBIdCfD',
 name: 'Best of Paris in 7 Days Tour',
 info: 'Paris is synonymous with the finest things that cu…e vivre. Join us for the Best of Paris in 7 Days!', 
image: 'https://dl.airtable.com/.attachments/a0cd0702c443f31526267f38ea5314a1/2447eb7a/paris.jpg', price: '1,995'}
1: {id: 'recIwxrvU9HfJR3B4', 
name: 'Best of Ireland in 14 Days Tour', 
info: "Rick Steves' Best of Ireland tour kicks off with t…eart. Join us for the Best of Ireland in 14 Days!",
 image: 'https://dl.airtable.com/.attachments/6c24084000a3777064c5200a8c2ae931/04081a3e/ireland.jpeg', price: '3,895'}
2: {id: 'recJLWcHScdUtI3ny',
 name: 'Best of Salzburg & Vienna in 8 Days Tour', 
info: "Let's go where classical music, towering castles, … the Best of Munich, Salzburg & Vienna in 8 Days!", 
image: 'https://dl.airtable.com/.attachments/27f6cbfe631e303f98b97e9dafacf25b/6bbe2a07/vienna.jpeg', price: '2,695'}

這是我的反應代碼，handleDelete 函式需要洗掉點擊的特定帖子，如果回應是使用過濾器方法的物件陣列，我可以這樣做，但這是我第一次使用物件的物件

const url = "https://course-api.com/react-tours-project";

function Card() {
  const handleDelete = (key) => {

     
  }
  



const[isOpen,setisOpen]=useState(false)
const[response, setresponse]=useState(null)
useEffect(() => {
    fetch(url)
    .then(resp => resp.json())
    .then((data) =>setresponse({...data}));

    console.log(response)
}, [])



  return (
    <div className="section">{response ?
      Object.keys(response).map((item, i) => (
        <li className="travelcompany-input" key={i}>
              <div className="single-tour">
                <img src={response[item].image} alt="" />
                <footer>
                  <div className="tour-info">
                    <h4>{response[item].name}</h4>
                    <div className="tour-price">
                      <h4>${response[item].price}</h4>
                    </div>
                  </div>
                  
                  <div className="delete-btn" onClick={()=>handleDelete(key)}>Not Interested</div>
                </footer>
              </div>
         
        </li>
    ))
:<h2>Loading...</h2>}
    </div>
  );
}

export default Card;

uj5u.com熱心網友回復：

1）您正在獲取一個物件陣列，但您正在將其轉換為物件：

useEffect(() => {
    fetch(url)
    .then(resp => resp.json())
    .then((data) => {
          console.log(data);      // array of objects
          setresponse({...data})  // PROBLEM
    });

你不應該使用這個

setresponse({...data});

相反，你應該使用

setresponse(data);

現場演示

2）您可以創建一個loading狀態：

const [isLoading, setIsLoading] = useState(true);

并false在任何情況下將其更改為請求是否完成，因此您可以在finally方法中更改狀態Promise為：

useEffect(() => {
    fetch(url)
        .then((resp) => resp.json())
        .then((data) => setresponse(data))
        .finally(() => setIsLoading(false));
}, []);

3）并過濾資料只需將回應過濾為：

const handleDelete = (key) => {
    setresponse((data) => data.filter((o) => o.id !== key));
}; 

uj5u.com熱心網友回復：

嘗試這個？

const url = "https://course-api.com/react-tours-project";

function Card() {
  const handleDelete = (id) => {
    // use id value from api data
    setresponse((response) => response.filter((item) => item.id !== id))
     
  }
  



const[isOpen,setisOpen]=useState(false)
const[response, setresponse]=useState(null)
useEffect(() => {
    fetch(url)
    .then(resp => resp.json())
    .then((data) =>setresponse(data));

    console.log(response)
}, [])



  return (
    <div className="section">{response ?
      Object.keys(response).map((item, i) => (
        <li className="travelcompany-input" key={i}>
              <div className="single-tour">
                <img src={response[item].image} alt="" />
                <footer>
                  <div className="tour-info">
                    <h4>{response[item].name}</h4>
                    <div className="tour-price">
                      <h4>${response[item].price}</h4>
                    </div>
                  </div>
                  
                  <div className="delete-btn" onClick={()=>handleDelete(response[item].id)}>Not Interested</div>
                </footer>
              </div>
         
        </li>
    ))
:<h2>Loading...</h2>}
    </div>
  );
}

export default Card;

標籤：javascript 反应 目的 筛选 点击

上一篇：如果使用變數完成，則使用負緩沖區宣告的陣列有效

下一篇：用戶輸入時“ ”和“-”的獨特CSS樣式