reactjs - 当 props 改变时，React 不会重新渲染组件

Question

我遇到了 React 组件在 props 更改时不重新渲染的问题。 GroupLabel 将 counter 作为 prop。

export const GroupLabel = (props) => {
    const change = () => {
        props.setCurrent(props.group);
        let newCounter = props.counter;
        newCounter[props.group.ID] = 0;
        props.setCounter(newCounter);
    };
    
    return (
        <li className="person" onClick={change}>
            <div className="user">
                <img src="..." 
            </div>
            <p className="name-time">
                <span className="name">{props.group.name}</span>
            </p>
            {props.counter[props.group.ID]>0?<span className="badge badge-primary float-right">{props.counter[props.group.ID]}</span>:null}
        </li>
    );
}

GroupLabel 由其父组件为其组中的每个组调用(组是对象列表和状态)。

{groups.length!==0?groups.map(item => {return <GroupLabel counter={counter} setCounter={setCounter} key={item.ID} setCurrent={setCurrent} group={item}/>}):null}

在父组件计数器中，有一个对象将 groupID 映射到该组通过 websocket 接收的消息数。改成这样:

let newCounter = counter; // counter is a current state
newCounter[msgJSON.group]++; // msgJSON.group is id of group to which message is directed
setCounter(newCounter);

一切正常，但 React 仍然不重新渲染。根据我的阅读，React 应该在以下情况下重新渲染其组件:

• 他们的状态发生变化

• 他们的 Prop 发生了变化

• 父组件重新渲染

在这种情况下，GroupLabel 属性会发生变化，父状态也会发生变化(因为它传递的计数器是他的状态)。我可以在 React Dev Tools 中看到 counter prop 已更改(最初每个组都为零)。

我没有给出父组件的完整代码，因为它太长了。

Answer 1

问题在于您正在改变状态，而不是创建新状态。当你在函数组件中设置状态时，react 会在旧状态和新状态之间执行 === 。如果它们相等，则组件不会渲染。

要解决此问题，请更改以下内容:

let newCounter = props.counter;
newCounter[props.group.ID] = 0;
props.setCounter(newCounter);

对此:

let newCounter = {
  ...props.counter
};
newCounter[props.group.ID] = 0;
props.setCounter(newCounter);

还有这个:

let newCounter = counter;
newCounter[msgJSON.group]++;
setCounter(newCounter);

对此:

let newCounter = {
  ...counter;
}
newCounter[msgJSON.group]++;
setCounter(newCounter);