当从父组件传入的道具更改时，React 子组件不会重新渲染

Question

我有一个简化的反应结构，如下所示，我希望 MyGrandChildComponent 根据对 MyParentComponent 的 'list' 属性的更改重新呈现。我可以看到该列表在 MyParentComponent 和 MyChildComponent 中具有新值。但是，它甚至没有命中 MyGrandChildComponent 的 return 函数。我在这里遗漏了什么吗？

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>
    );
}

Answer 1

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

您忘记了{} props.list.listName

Answer 2

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

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

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

父级需要将列表保存为状态变量，而不仅仅是局部变量。这是因为 React 会根据状态或 prop 的变化重新渲染，而在父级你只能将它保存在状态中。有了这个，当列表的值发生变化时，将重新渲染，然后将更改分配给子孙。此外，在功能组件中维护状态的唯一方法是使用挂钩。

当从父组件传入的道具更改时，React 子组件不会重新渲染

React child component does not re-render when props passed in from parent changes

reactjs

react-props