TypeError：无法读取反应中未定义的属性“减少”

Posted 2023-02-22

【中文标题】TypeError：无法读取反应中未定义的属性“减少”

【英文标题】：TypeError: Cannot read property 'reduce' of undefined in react

【发布时间】：2019-10-02 03:06:08

【问题描述】：

我有一个表单，我要求用户输入几个字段的字段值，将字段值存储在一个状态中，并以自定义格式显示状态值。

所以，我有几个输入字段和一个提交按钮：

<button onClick=this.handleSubmit>Submit</button>
         
           this.state.credentials &&
           //<Credentials value=this.state/>
            <Credentials value=JSON.stringify(this.state, undefined, 2) />
         

Credentials 函数将组件的状态转换为 JSON 格式：

const Credentials = (value ) => 
    return <pre>formatState(value)</pre>;

formatState 函数基本上会操作状态值并以我想要的方式显示它们：

function formatState(state) 
  console.log("hi")
  console.log(state);
    const output = state.groups.reduce((final, s)=> 
      console.log(output)
      const values = Object.keys(s).reduce((out, o)=> 
        out[o] = s[o].map(k => Object.values(k))
        return out;
        , )
        final =  ...final, ...values
        return final;
      , )
      console.log(output) 
  

状态如下：

  "groups": [
    
      "typeA": [
        
          "name": "abc"
        ,
        
          "number": "13,14"
        
      ],
      "typeB": [
        
          "country": "xyz"
        ,
        
          "date1": "2019-05-14"
        
      ]
    
  ]

但我想要这样的输出：

groups: 
"typeA": [[abc],[13,14]],
"typeB": [[2019-05-14],[xyz]]

SO，reduce 函数用于将状态转换为以下输出。但我得到了错误： "TypeError: 无法读取未定义的属性 'reduce'"

请谁能告诉我为什么会这样。

【问题讨论】：

不要stringifystate，同时将值传递给Credentials

【参考方案1】：

错误在这里<Credentials value=JSON.stringify(this.state, undefined, 2) />。 JSON.stringify 生成某个对象的字符串表示（在您的情况下为this.state）。 formatState 的参数 state 具有字符串类型。似乎您希望 state 成为对象。所以你应该这样做

<Credentials value=this.state />

【讨论】：

有效！谢谢！你能告诉我如何在屏幕上显示“决赛”吗？因为我可以在控制台上看到我的输出，但在屏幕上看不到

您的formatState(state) 没有返回值。在formatState(state)末尾添加return output

我在 formatState(state) 中的 console.log() 之后添加了一个返回输出语句。但它给了我这个错误：“Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys typeA, typeB)。如果你打算渲染一组孩子，请改用数组”跨度>

这里JSON.Stringify 可能会有所帮助。做return JSON.Stringify(output)

如果您觉得没问题，请考虑接受答案。