当从父级传入的 props 发生变化时，React 子组件不会重新渲染答案

【问题标题】：React child component does not re-render when props passed in from parent changes当从父级传入的 props 发生变化时，React 子组件不会重新渲染
【发布时间】：2020-06-10 07:54:57
【问题描述】：

我有一个简化的反应结构，如下所示，我希望 MyGrandChildComponent 根据对 MyParentComponent 的“列表”属性的更改重新渲染。我可以看到该列表在 MyParentComponent 和 MyChildComponent 中具有新值。但是，它甚至没有命中 MyGrandChildComponent 的返回函数。我在这里错过了什么吗？

const MyGrandChildComponent = (props) => {
    return (
        <div>props.list.listName</div>
    );
};
const MyChildComponent = (props) => {
    return (
        <div><MyGrandChildComponent list={props.list}/></div>
    );
}

const MyParentComponent = (props) => {
    const list = { listName: 'MyList' };
    return (
        <div><MyChildComponent list={list} /></div>
    );
}

【问题讨论】：

你能检查并确保它不是因为你渲染像<div>props.list.listName</div>而不是<div>{props.list.listName}</div>吗？

标签： reactjs react-props

【解决方案1】：

在您的 MyParentComponent 中，列表不是状态变量，因此更改它甚至不会导致重新渲染。如果您绝对希望在更改它重新呈现的列表的值时这样做，那么您将希望将状态带到您的功能组件中，而这样做的方法是使用钩子。在这种情况下，您的父组件将如下所示

import React, {useState} from 'react'
const MyParentComponent = (props) => {
    const [list, setList] =  useState({ listName: 'MyList' });
    return (
        <div><MyChildComponent list={list} /></div>
    );
}

然后在子组件中按照我在上面评论中的建议进行渲染。

父级需要将列表作为状态变量而不是局部变量。这是因为 react 会根据 state 或 prop 的变化重新渲染，而在父级上，您只能将其保持在 state 中。这样，当 list 的值发生更改时，将重新渲染，然后将更改分配给子孙。此外，在功能组件中维护状态的唯一方法是使用钩子。

【讨论】：

【解决方案2】：

const MyGrandChildComponent = (props) => {
    return (
        <div>{props.list.listName}</div>
    );
};

你忘记了props.list.listName周围的{}

【讨论】：