使用地圖功能列出組件時，為什么我沒有重新渲染？

我想制作一個通知組件，但遇到了一些問題。

首先，我沒有注意到這個錯誤，因為我設定了陣列，并沒有推送到它。我可以確認它正在將它推送到陣列，但由于某種原因，它沒有在 React 中更新。

我已經將密鑰設定為時間戳，但仍然無法正常作業。

import './App.css';
import { v4 as uuid } from 'uuid';
import { React, useState } from 'react';
import { animated, Spring} from 'react-spring';

function App() {
    var notifications = [
        {
            "identifier": new Date().getTime(),
            "title": "lath",
            "content": "react is good",
            "type": true,
        }
    ]
    // window.addEventListener("message", (event) => {
    //     let data = event.data ?? undefined
    //     switch (data.type) {
    //         case "sendNotify":
    //             console.log(data)
    //         break
    //     }
    // });
    // addToNotify()
    function addToNotify() {
        notifications.push({
            // "identifier": uuid().slice(0,8),
            "identifier": new Date().getTime(),
            "title": "lath",
            "content": "this is a test",
            "type": true,
        })
        console.log(notifications)
    }
    
    return [
        <button key="clickBtn" onClick={() => addToNotify()}></button>,
        <div key="notify-wrap" className="notify-wrapper">
            {notifications.map(notif => (
                // console.log(notif),
                <Notification key={notif.identifier   "-key"} title={notif.title} content={notif.content} type={notif.type} identifier={notif.identifier}/>
            ))}
        </div>,
    ]
}

function Notification(props) {

    // var key = uuid().slice(0,8)
    // console.log(props)

    return (
        <Spring config={{duration: 500}} from={{ opacity: 0 }} to={{opacity : 1}}>
            {styles => 
            <animated.div key={props.identifier} className="notify-container" style={styles}>
                <div key={props.identifier   "-header-container"} className="notify-header-container">
                    <h1 key={props.identifier   "-header"} className="notify-header">{props.title}</h1>
                    <img key={props.identifier   "-header-img"} className="notify-icon" src={`img/${props.type ? "check" : "cross"}.png`}></img>
                </div>
                <p key={props.identifier   "-content"} className="notify-text">{props.content}</p>
            </animated.div>
            }
        </Spring>
    );
}

export default App;

uj5u.com熱心網友回復：

您應該使用useState掛鉤來處理通知狀態，以便每次將新通知添加到陣列時，useState 都會觸發使用新狀態的重新渲染。

將您的代碼更改為：

import { v4 as uuid } from "uuid";
import { React, useState } from "react";
import { animated, Spring } from "react-spring";

const sampleNotification = {
  // "identifier": uuid().slice(0,8),
  identifier: new Date().getTime(),
  title: "lath",
  content: "this is a test",
  type: true
};

function App() {
  // use useState() and initialize it with your notifications array
  var [notifications, setNotifications] = useState([
    {
      identifier: new Date().getTime(),
      title: "lath",
      content: "react is good",
      type: true
    }
  ]);

  function addToNotify(notification) {
    // change the state by appending the new notification to the previous state
    setNotifications((prevNotifications) =>
      prevNotifications.concat(notification)
    );
    console.log(notifications);
  }

  return [
    <button
      key="clickBtn"
      onClick={() => addToNotify(sampleNotification)}
    ></button>,
    <div key="notify-wrap" className="notify-wrapper">
      {notifications.map((notif) => (
        // console.log(notif),
        <Notification
          key={notif.identifier   "-key"}
          title={notif.title}
          content={notif.content}
          type={notif.type}
          identifier={notif.identifier}
        />
      ))}
    </div>
  ];
}

[...]
 
export default App;

uj5u.com熱心網友回復：

您應該創建一個狀態來存盤您的通知。每次更新狀態時，它都會觸發重新渲染。

const [notifications , setNotifications] = useState([
        {
            "identifier": new Date().getTime(),
            "title": "lath",
            "content": "react is good",
            "type": true,
        }
    ])
    
    const addToNotify = () => {
        const notisObj = {
            "identifier": new Date().getTime(),
            "title": "lath",
            "content": "this is a test",
            "type": true,
        }
        
        setNotifications((curVal) => [...curVal, notisObj]);
    }

uj5u.com熱心網友回復：

感謝您的回答！太感謝了，之前一直在敲我的頭！

標籤：反应

上一篇：是否可以使用Typescript匯入別名

下一篇：React-狀態不使用useReducer更新