在 React 中如何将 object 从 API 保存到 "favorites" 组件？

Question

我正在使用 NASA API 在页面上呈现媒体图像和信息。我想添加一个按钮，将图像“保存”到收藏夹数组。我该怎么做？现在，我有了它，这样当单击一个按钮时，整个数组就会被复制，而不是 API.

中的单个 object

import React, { useState, useEffect } from "react";

const apiKey = process.env.REACT_APP_APOD_KEY;

function Main() {

    const [media, setMedia] = useState([]);
    const [faves, setFaves] = useState([]);

    const mediaGet = () => {
        fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}&count=10`)
            .then(res => res.json())
            .then(result => {
                setMedia(result)
            })
    }

    const addFave = (media) => {
        const newFavesList = [...faves, media];
        setFaves(newFavesList);

        // make this function add to faves array (new array)

    };

    useEffect(() => {
        mediaGet()
    }, [])

    console.log(media);


    return (
        <>
            <h1>Clever name here</h1>

            {/* move this to Card component */}

            {media.map((media) => (
                <div key={media.id}>
                    <h2>{media.title}</h2>
                    <h3>{media.date}</h3>
                    <img src={media.url} alt={media.title} />
                    <button onClick={addFave} type="button">Add to array</button>
                </div>
            ))}

        </>
    )
}

export default Main;

Answer 1

您的 addFave 函数需要一个参数 (media) 但您使用 onClick={addFave} 调用它只会传递 click Event 调用时。

要从 map 回调中传递 media 对象，请使用

onClick={() => addFave(media)}

我还会更改处理程序以使用 useState setter

的 functional version

const addFave = (fave) => {
  setFaves(prev => [...prev, fave])
}

仅供参考，尽量避免阴影（在不同范围内重复使用变量名）。甚至还有一个方便的 ES-lint 规则 ~ https://eslint.org/docs/rules/no-shadow

{media.map(item => (
  <div key={item.id}>
    <h2>{item.title}</h2>
    <h3>{item.date}</h3>
    <img src={item.url} alt={item.title} />
    <button onClick={() => addFave(item)} type="button">Add to array</button>
  </div>
))}

在 React 中如何将 object 从 API 保存到 "favorites" 组件？

How do you save an object from an API to a "favorites" component in React?

javascript

reactjs

fetch-api