Получить api при нажатии кнопки «Мне нравится»

Question

Я создал значок «Мне нравится» на моем интерфейсе с использованием команды native native, где я хочу, чтобы он публиковал в API, как только щелкнет значок «Мне нравится», поэтому я создал отдельную функцию likePress (), которая содержит if утверждение, в котором только при нажатии его цвет должен измениться на красный и должен возвращать spi, однако будучи новичком ie чего-то не хватает.

Ниже приведен фрагмент моей функции likePress ():

     likePress = async() => {
    if (this.state.likeIcon == 'white') {
      this.setState({ likeIcon: 'red' }); 
    }    
    if (this.state.likeIcon == 'red') {
        fetch('some url' +product._id, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                like: this.state.product._id
            })

        })
        .then(response => response.json())
        .then(result => {

            this.setState({ likeIcon: 'red', data: result })
            console.log(_id,'id')
          console.log(result,JSON.stringify({
            like: this.state.product._id
        }))
        }).catch(error => {
          alert(error);
          console.error(error);
        })
    }
}

И я вызываю эту функцию внутри следующего, который находится внутри плоского списка:

<TouchableOpacity
                onPress={this.likePress}
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon
                  name="heart"
                  size={30}
                  color={this.state.likeIcon}

                />
              </TouchableOpacity>

Пожалуйста, помогите мне понять, правильно ли я это делаю или нет. Скажите мне, если что-нибудь еще потребуется, спасибо.

Мои журналы, прямо сейчас:

 {"product": [{"__v": 0, "_id": "5e301696f75182463c6874ed", "color": "Space Grey", "colors": [Array], "description": "6.5-inch Super Retina XDR OLED display
Water and dust resistant (4 meters for up to 30 minutes, IP68)
Triple-camera system with 12MP Ultra Wide, Wide, and Telephoto cameras; Night mode, Portrait mode, and 4K video up to 60fps
12MP TrueDepth front camera with Portrait Mode, 4K video, and Slo-Mo
Face ID for secure authentication and Apple Pay
A13 Bionic chip with third-generation Neural Engine
Fast charge with 18W adapter included
Wireless charging
Manufacturer Detail: Apple Inc, One Apple Park Way, Cupertino, CA 95014, USA", "downloads": 2, "nameImg": "61jgfLBydjL._SL1024_-1580209807807.jpg", "nameVid": "videoplayback (1)-1580209807809.mp4", "price": 99900, "sellerID": "13755902031", "sellerName": "Appario", "size": "5.8-inch", "sizes": [Array], "title": "Apple iPhone 11 Pro", "typeImg": "image/jpeg", "typeVid": "video/mp4", "uploadedOn": "2020-01-28T11:10:14.244Z", "urlImg": "https://atiiproductmediafiles.s3.ap-south-1.amazonaws.com/61jgfLBydjL._SL1024_-1580209807807.jpg", "urlVid": "https://atiiproductmediafiles.s3.ap-south-1.amazonaws.com/videoplayback+%281%29-1580209807809.mp4"}, {"__v": 0, "_id": "5e30171df75182463c6874ee", "color": "Haze Blue", "colors": [Array], "description": "Rear Camera - 48MP (Primary) + 8MP (Tele-photo)+16MP (Ultrawide) | Front Camera - 16 MP POP-UP Camera
16.9 centimeters (6.67-inch) multi-touch capacitive touchscreen with 3120 x 1440 pixels resolution
Memory, Storage and SIM: 6GB RAM | 128GB internal memory | Dual SIM dual-standby (4G+4G)
Android Oxygen operating system with 2.84GHz Snapdragon 855 octa core processor
4000mAH lithium-ion battery
1 year manufacturer warranty for device and 6 months manufacturer warranty for in-box accessories including batteries from the date of purchase
Box also includes: Power Adapter, Type-C Cable (Support USB 2.0), Quick Start Guide, Welcome Letter, Safety Information and Warranty Card, Logo Sticker, Case, Screen Protector (pre-applied) and SIM Tray Ejector", "downloads": 1, "nameImg": "61FRLa8IFTL._SL1500_-1580209943294.jpg", "nameVid": "videoplayback-1580209943295.mp4", "price": 53999, "sellerID": "13755902031", "sellerName": "OnePlus", "size": "6.67 inch", "sizes": [Array], "title": "OnePlus 7T Pro", "typeImg": "image/jpeg", "typeVid": "video/mp4", "uploadedOn": "2020-01-28T11:12:29.918Z", "urlImg": "https://atiiproductmediafiles.s3.ap-south-1.amazonaws.com/61FRLa8IFTL._SL1500_-1580209943294.jpg", "urlVid": "https://atiiproductmediafiles.s3.ap-south-1.amazonaws.com/videoplayback-1580209943295.mp4"}, {"__v": 0, "_id": "5e3273ae32213d4ba037042a", "color": "assas", "colors": [Array], "description": "assa", "downloads": 0, "nameImg": "apex-legends-logo-1580364717181.jpg", "nameVid": "videoplayback (2)-1580364717241.mp4", "price": 222, "sellerID": "sas", "sellerName": "sasa", "size": "sdassa", "sizes": [Array], "title": "wws", "typeImg": "image/jpeg", "typeVid": "video/mp4", "uploadedOn": "2020-01-30T06:11:58.768Z", "urlImg": "https://atiiproductmediafiles.s3.ap-south-1.amazonaws.com/apex-legends-logo-1580364717181.jpg", "urlVid": "https://atiiproductmediafiles.s3.ap-south-1.amazonaws.com/videoplayback%20%282%29-1580364717241.mp4"}], "user": {"__v": 0, "_id": "5e300846241a3b1c89d654c4", "address": [], "changes": [], "checkout": [], "like": [], "mobile": 8697779335, "orders": [], "registeredOn": "2020-01-28T10:09:10.569Z"}}

Как вы можете видеть, он не передает идентификатор продукта, а только выбирает первый API, который я использовал для отображения видео в плоском списке.

Answer 1

Когда вы устанавливаете likeIcon для красного через this.setState({ likeIcon: "red" }), вы не можете проверить, установлено ли состояние красного сразу после setState, потому что оно асинхронное (ссылка на do c).

Вы можете заменить эту логику c с помощью приведенного ниже логического значения isRed, которое будет вызывать API только в том случае, если состояние likeIcon было белым до нажатия кнопки.

likePress = async () => {
        let isRed = false;
        if (this.state.likeIcon === "white") {
            this.setState({ likeIcon: "red" });
            isRed = true;
        }
        if (isRed) {
            try {
                const response = await fetch("some url" + product._id, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ like: this.state.product._id })
                });
                const json = await response.json();
                this.setState({
                    likeIcon: "red",
                    data: json
                });
                console.log(_id, "id");
                console.log(
                    result,
                    JSON.stringify({
                        like: this.state.product._id
                    })
                );
            } catch (error) {
                console.error(error);
            }
        }
    };

Я также изменил его, чтобы вы использовали async await вместо функций обратного вызова, что, на мой взгляд, немного облегчает чтение onPress.

Answer 2

Вам следует изменить функцию, как показано ниже.

likePress = () => {
    if (this.state.likeIcon != 'white') {
        fetch('some url', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                like: this.state.product._id
            })
        }).then(result => {
            this.setState({ likeIcon: 'red' })
        }).catch(error => {
            //do something with error
        })
    }
}

Это обновит состояние при успешном получении ответа.