ReactJs：显示状态对象内部的值答案

【问题标题】：ReactJs: Displaying the values inside of a state objectReactJs：显示状态对象内部的值
【发布时间】：2020-03-04 17:16:03
【问题描述】：

我正在尝试在状态对象中显示值：
我试过两种方法：

方法一：

 <tbody>
                    {Object.keys(this.state.operationSavInformation).map(
                      function(key, index) {
                        return (
                          <tr key={key}>
                            <td>{`${key}:`}</td>
                            <td>
                              <strong>
                                {this.state.operationSavInformation[key]}
                              </strong>
                            </td>
                          </tr>
                        );
                      }
                    )}
                  </tbody>

方法二：

<tbody>
                {Object.keys(this.state.operationSavInformation).forEach(
                  function(key) {
                    var value = this.state.operationSavInformation[key];
                    return (
                      <tr key={key}>
                        <td>{`${key}:`}</td>
                        <td>
                          <strong>value</strong>
                        </td>
                      </tr>
                    );
                  }
                )}
              </tbody>

两者都给出这个错误：

TypeError: Cannot read property 'state' of undefined

不幸的是，这是我发现在 javaScript 中映射对象值的仅有的两种方法。如果对象被正常定义，这将起作用。然而这里的问题是 this 在map 或forEach 内无法访问，这就是我收到错误的原因。

【问题讨论】：

等等，我看错了你的代码。你需要的是<tbody>{Object.entries(this.state.operationSavInformation).map(([key, value]) => ...)}</tbody>不管怎样，如果你使用箭头函数代替，你仍然可以访问外部的this。
这是一个活生生的例子：codesandbox.io/s/magical-dubinsky-tkw6o
看来，您的代码是正确的。我认为错误是您编写此代码而不是在反应组件中。
@ChrisG 非常感谢，这解决了我的问题

标签： javascript reactjs dictionary foreach javascript-objects

【解决方案1】：

只需在谓词函数之外获取对它的引用，如下所示：

const data = this.state.operationSavInformation
Object.keys(data).map(key => (<tr key={key}>
  <td>{`${key}:`}</td>
  <td>
    <strong>
      {data[key]}
    </strong>
  </td>
</tr>
))

【讨论】：

你不能在 JSX 中这样做
你不能在渲染函数开始时获取引用，然后 Object.keys 在你的返回语句中吗？
这绝对是你的做法。这是旧的const that = this 解决方法。你只需要弄清楚将它放在语法中的什么位置。
如果你使用箭头函数，你不应该在这里需要它。 OP 正在使用 function，它隐藏了实例 this。
我已经重写了我的codesandbox 以使用这种方法，当然效果很好。答案应该在语法上更精确一些，并包括每行在渲染函数上下文中的位置。