我需要一个 handleDelete 过滤器函数来响应 onclick 按钮。我可以为对象数组编写代码，但这是对象的对象

Question

这是来自 API 提取的响应

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 函数需要删除特定的 post 单击如果响应是使用 filter 方法的对象数组，我可以这样做，但这是我第一次使用对象的对象

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;

Answer 1

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 无论请求是否完成，因此您可以将 Promise 的 finally 方法中的状态更改为：

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

Answer 2

试试这个？

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;

我需要一个 handleDelete 过滤器函数来响应 onclick 按钮。我可以为对象数组编写代码，但这是对象的对象

I need a handleDelete filter function for a react onclick button. i can write the code for an array of objects but this is an object of objects

javascript

object

onclick

filter

reactjs