在 React.js 中，onClick 函数在没有页面刷新的情况下不显示详细信息答案

【问题标题】：In React.js the onClick function is not showing details without page refresh在 React.js 中，onClick 函数在没有页面刷新的情况下不显示详细信息
【发布时间】：2021-08-19 08:10:40
【问题描述】：

我正在尝试在 React.js 中创建一个线条和不喜欢按钮。我有两个包含谷歌图标的标签，点击图标后，它们应该实时更改而无需刷新页面。

但如果不刷新页面，它们就不会改变。我正在使用 MacBook Air，并且同时使用 Safari 浏览器 和 Brave 浏览器，但它无法正常工作。

我的页面编码如下：-


import React, { useState, useEffect, useContext } from 'react';
import {UserContext} from '../../App';

const Home = () => {

    const [data, setData] = useState([]);
    const { state, dispatch } = useContext(UserContext); // eslint-disable-line

    useEffect(() => {
        fetch('/allpost', {
            headers: {
                "Authorization": "Bearer " + localStorage.getItem("jwt")
            }
        }).then(res => res.json()).then(result => {
            setData(result.posts);
        });
    }, []);

    const likePost = (id) => {
        fetch('/like', {
            method: "put",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + localStorage.getItem("jwt")
            },
            body: JSON.stringify({
                postId: id
            })
        }).then(res => res.json()).then(result => {
            const newData = data.map(item => {
                if (item._id == result._id) { // eslint-disable-line
                    return result;
                } else {
                    return item;
                }
            })
            setData(newData);
        }).catch(err => {
            console.log(err);
        });
    }

    const dislikePost = (id) => {
        fetch('/dislike', {
            method: "put",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + localStorage.getItem("jwt")
            },
            body: JSON.stringify({
                postId: id
            })
        }).then(res => res.json()).then(result => {
            const newData = data.map(item => {
                if (item._id == result._id) { // eslint-disable-line
                    return result;
                } else {
                    return item;
                }
            })
            setData(newData);
        }).catch(err => {
            console.log(err);
        });
    }

    return (
        <div className="home">
            {
                data.map(item => {
                    return (
                        <div className="card home-card" style={{ borderRadius:"6px" }} key={item._id}>
                            <h6 style={{ paddingLeft: "10px", paddingTop:"10px", fontSize:"17px" }}>{ item.postedBy.name }</h6>
                            <div className="card-image">
                                <img src={ item.photo } style={{ paddingLeft:"6px", paddingRight:"6px" }} alt="Posted photograph" />
                            </div>
                            <div className="card-content">

                                {item.likes.includes(state._id)
                                    ?
                                        <i className="material-icons" style={{ color: "red" }} onClick={() => { dislikePost(item._id) }}>favorite_border</i>
                                    :
                                        <i className="material-icons" style={{ color: "red" }} onClick={() => {likePost(item._id)}}>favorite</i>
                                    
                                }
                                
                                <h6>{item.likes.length} likes</h6>
                                <h6>{ item.title }</h6>
                                <p>{ item.body }</p>
                                <input type="text" placeholder="Add a comment here." />
                            </div>
                        </div>
                    );
                })
            }
        </div>
    );
}

export default Home;

我特别提到了我的图标更改逻辑的编写位置。如下：


    <div className="card-content">

         {item.likes.includes(state._id)
              ?
               <i className="material-icons" style={{ color: "red" }} onClick={() => { dislikePost(item._id) }}>favorite_border</i>
              :
               <i className="material-icons" style={{ color: "red" }} onClick={() => {likePost(item._id)}}>favorite</i>
                                    
         }
                                
         <h6>{item.likes.length} likes</h6>
         <h6>{ item.title }</h6>
         <p>{ item.body }</p>
         <input type="text" placeholder="Add a comment here." />
    </div>

【问题讨论】：

那么问题是您的逻辑仅更新本地data 状态而不是从上下文提供的state？ state 尤其是 state._id 代表什么？
正如@DrewReese 指出的那样。问题在这里 item.likes.includes(state._id) 。所以 onClick 除了触发你需要更新你的上下文的状态。

标签： javascript html node.js reactjs conditional-statements

【解决方案1】：

这与这个问题无关。但是，如果您准备进行重构，那么我建议您将 likePost 和 dislikePost 函数更改为一个函数。因为这两个函数的作用相同，只是它们具有不同的 url，您可以将其作为函数参数传递。

 const updatePostLikes = (id, url) => {
    fetch(url, {
      method: 'put',
      headers: {
        'Content-Type': 'application/json',
        Authorization: 'Bearer ' + localStorage.getItem('jwt'),
      },
      body: JSON.stringify({
        postId: id,
      }),
    })
      .then((res) => res.json())
      .then((result) => {
        const newData = data.map((item) => {
          if (item._id == result._id) {
            // eslint-disable-line
            return result;
          } else {
            return item;
          }
        });
        setData(newData);
      })
      .catch((err) => {
        console.log(err);
      });
  }

当点击喜欢和不喜欢按钮时，您现在可以这样做

updatePostLikes(item._id, '/like') // for likes

updatePostLikes(item._id, '/dislike') // for dislikes

【讨论】：