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)的调用。我在setState函数内调用了changeState。调用setState后，如果我将name变量打印到控制台，它仍然保留旧值。如何让setState为name分配新值？

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

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

Codepen example here

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

Answer 1

您正在使用无状态组件，没有状态，因此setState函数不会影响任何内容。

有两种方法可以解决它：

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

export class Test1 extends React.componnent { ... (the rest of your component) }
第二个选项（在我的选项中通常是更好的选项）不是改变组件的状态，从父组件获取事件，而是调用要调用setState的事件，事件将包含更新所请求的值，并且子组件将作为prop接收它，并且您的组件不必更改为Container（具有状态的组件）

ReactJS - setState无法更新属性值

1 个答案: