React：如果 prop 改变，则重新渲染组件

Question

我有一个问题，当我通过父组件更改 prop 值时，子组件没有重新渲染。

父组件：

import React, { useEffect, useState } from 'react';
import "./style.scss";

import DeviceButton from "../../buttons/deviceButton/deviceButton";

function Dashboard({ socket }) {
    const [activeButtons, setActiveButtons] = useState({desk: false, shelf: false});

    function toggleLight(type, id) {
        if(type && id) {
            var buttons = activeButtons;
            buttons.desk = true;
            setActiveButtons(buttons);
            console.log(activeButtons)
        }
    }

    return(
        <div className="view">
            <div className="devices">
                <div className="buttons">
                    <DeviceButton text="Desk" active={activeButtons.desk} type="device" id="desk" event={toggleLight} />
                    <DeviceButton text="Shelf" active={activeButtons.shelf} type="device" id="shelf" event={toggleLight} />
                </div>
            </div>
        </div>
    )
}

子组件：

import React, { useState, useEffect } from 'react';
import "./style.scss";

function DeviceButton(props) {
    useEffect(() => {
        // This is only executed during initialization.
        console.log(props.active);
    }, [props.active]);
    return(
        <button className={`device-button ${props.active == true ? "active" : ""}`}  onClick={() => props.event(props.type, props.id)}>
            <span className="text">{props.text}</span>
            <span className="status">Inactive</span>
        </button>
    )
}

export default DeviceButton;

当我点击 DeviceButton 时，父组件的 toggleLight 函数被调用。这会导致状态发生变化，并作为 prop 传递给子组件。不幸的是，子组件不会再次渲染，所以我可以使用新的 prop value.Unfortunately，useEffect 函数仅在组件初始化时执行。

Answer 1

问题是您改变当前状态对象，而不是设置新的状态对象。 React 在确定状态是否更改时依赖于检查 引用相等性 ；改变对象不会被视为内存中的新对象，因此不会提示重新渲染。

解决此问题的一种快速方法是使用展开运算符进行浅表复制，这将创建一个新对象：

function toggleLight(type, id) {
  if(type && id) {
    var buttons = {...activeButtons};
    buttons.desk = true;
    setActiveButtons(buttons);
  }
}

React：如果 prop 改变，则重新渲染组件

React: Rerender component if prop changed

components

reactjs