ReactJS - setState 无法更新属性值

Question

我在 React 组件中有一个属性 name。使用setState 我正在尝试修改此属性。但是在setState 中为这个属性分配一个新值没有效果。请在下面找到我的示例代码。

export const Test = ({
  name,
  changeState = function (newName) {
    this.setState({name: newName}, () => console.log('Name after setState # ' + name)); //prints old value
    console.log(name); // Doesn't reflect changes. Prints old name
  }
 }) => 
(
    <div>Some data</div>
)

用户操作将触发对changeState(newName) 的调用。我在changeState 函数中调用setState。 在调用setState 之后，如果我将name 变量打印到控制台，它仍然保持旧值。 如何让 setState 为 name 分配一个新值？

我知道setState 是异步的，属性更新可能会在延迟后反映。但是对于上面的示例代码，name 变量即使在延迟之后也永远不会更新。 我已经实现了componentWillReceiveProps(nextProps) 方法并且它被调用但它总是接收旧的name。所以我认为这个问题与 setState 异步无关。

我创建了一个示例应用程序来演示我面临的问题。示例应用程序在本地运行良好，我可以重现该问题。但我无法在codepen 中获得相同的示例应用程序代码。它给了我一些“unexpected token”错误。但我希望查看代码有助于更好地理解我的问题。该代码基于现有的应用程序结构。

Codepen example here.

在代码中我有一个Parent 和两个孩子Child1 和Child2。在Parent 中，我定义了一个函数changeState，我将其作为属性传递给Child1。到Child2，我正在传递来自Parent 的“name”属性。
单击Child1 中的“Change Name”按钮会触发对Parent 的changeState 函数的调用。 Parent 中name 的初始值为'Robert'。 changeState 从 Child1 调用，新名称值为“Tom”。
但在 changeState 函数中，使用 setState 为“name”分配新值无效。在setState 完成后，我正在调用一个函数来打印“名称”，但它打印的是旧名称值，而不是setState 中分配的新名称。

Answer 1

你使用的是无状态组件，有for，没有状态所以setState函数不会影响任何东西。

有两种方法可以处理它：

1. 最简单的一种，但很可能不是最佳选择，只需将您的组件更改为常规组件即可：

   export class Test1 extends React.componnent { ... (the rest of your component) }

2. 第二个选项（通常在我的选项中更好）是代替更改组件的状态，从父组件获取事件，并在您想调用 setState 的地方调用事件，事件将包含根据请求更新值，并且子组件会将其作为 prop 接收，并且您的组件不必更改为 Container（具有状态的组件）

祝你好运！