Question

所以我遇到了这种奇怪的行为-当我尝试使用对象设置状态时，仅在某些情况下会失败。

例如，这可行，

FileComplaintCommand

但以下内容不适用。这将引发一个错误，说不允许React子对象成为对象。

getUserClaimAmount().then(
      userClaimAmount => {
        this.setState({ userClaimAmount: userClaimAmount.toString()})
      }
    );

但是，以下出于某些原因起作用。 “ bettingPoolTotal”与上面的“ userClaimAmount”类型相同。

getUserClaimAmount().then(
      userClaimAmount => {
        this.setState({ userClaimAmount: userClaimAmount})
      }
    );

下面是状态的屏幕截图。显然，显然有确实是对象的React子代。 Example of React state

Answer 1

您已经混合了组件的children属性和state。

创建组件时，React会填充

children属性。考虑以下JSX：

<Parent>
    <Child1 />
    text here
    <Child2 />
</Parent>

children的{{1}}属性将是一个包含三个条目的数组：从Parent创建的元素，字符串Child1和从"text here"创建的元素。如果您尝试将普通的JavaScript对象传递到最终的标记中（而不是传递到React组件中，因为它可以根据需要使用而不会出现错误，而是传递到本地HTML标记中），它将无法正常工作：

Child2

这正是您得到的错误。似乎有些元素已经作为子实体传递了<div> {{key: value}} </div>，因此在获取普通对象而不是字符串或JSX时出错。

关于状态-完全有可能在其中包含简单的对象；但是，应该非常谨慎地使用它。考虑某个组件中状态为this.state.userClaimAmount的组件中的以下情况：

obj

这里的最后一个const obj = this.state.obj; obj.key = 'value'; this.setState({obj: obj});令人惊讶地变成了空操作，因为此时状态已经改变-通过复制到setState的引用-然后是React，知道这是一个否定-op，不触发渲染，使组件与以前相同。

尽管React不允许对象作为子对象，但我的代码明确指出

1 个答案: