错误：对象作为 React 子项无效（找到：带有键 的对象）。改用数组

Posted 2023-02-22

【中文标题】错误：对象作为 React 子项无效（找到：带有键 的对象）。改用数组

【英文标题】：Error: Objects are not valid as a React child (found: object with keys ). use an array instead错误：对象作为 React 子项无效（找到：带有键 的对象）。改用数组

【发布时间】：2021-05-20 19:56:31

【问题描述】：

我将表单值传递给 myDoc 组件，但它显示 Object 作为 React 子级无效，我是 React 的初学者 错误：对象作为 React 子项无效（找到：带有键 的对象）。如果您打算渲染一组子项，请改用数组。

import React,useState from 'react'
import 
  PDFDownloadLink,
  Page,
  Text,
  View,
  Document,
  StyleSheet,
 from '@react-pdf/renderer'

const styles = StyleSheet.create(
  page: 
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
  ,
  section: 
    margin: 10,
    padding: 10,
    flexGrow: 1,
  ,
) 

MyDoc 组件

const MyDoc = (name) => (
  <Document>
    <Page size="A4" style=styles.page>
      <View style=styles.section>
        <Text>name</Text>
      </View>
      <View style=styles.section>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
) 

编辑组件

const Edit = () => 

    const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [about, setAbout] = useState('')

  return (
    <div className="EditScreen">
      <form>
        <input
          type="text"
          value=name
          placeholder="Name"
          onChange=(e) => setName(e.target.value)
        ></input>
        <br></br>
        <input
          type="text"
          value=email
          placeholder="Name"
          onChange=(e) => setEmail(e.target.value)
        ></input>
        <br></br>
        <input
          type="text"
          value=about
          placeholder="Name"
          onChange=(e) => setAbout(e.target.value)
        ></input>
        <br></br>
        <button type="submit">Submit</button>
      </form>

在此处传递名称道具

      <PDFDownloadLink document=<MyDoc name=name /> fileName="somename.pdf">
        ( blob, url, loading, error ) =>
          loading ? 'Loading document...' : 'Download now!'
        
      </PDFDownloadLink>
    </div>
  )


export default Edit ```

【参考方案1】：

React 会将 props 对象传递给您的组件，因此您需要对其进行解构以获取各个属性。所以把你的代码改成：

const MyDoc = (name) => (
  <Document>
    <Page size="A4" style=styles.page>
      <View style=styles.section>
        <Text>name</Text>
      </View>
      <View style=styles.section>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
) 

注意const MyDoc = (name) => ( 部分。

另一种方法是...

const MyDoc = (props) => (
...

然后像这样访问name 属性：

<Text>props.name</Text>

【讨论】：

感谢您抽出时间来概述我的问题，现在可以正常工作了。我通过你的回答理解了道具的概念。

【参考方案2】：

将该对象字符串化

这可能不是此处发布的特定问题的答案，但相关（相同的错误消息）。

在我的例子中，我在两个地方显示我的状态：一个是原始 JSON 数据，另一个是表格，其中 JSON 的属性是名称/值对的行。

问题是当我实现表格视图部分时，我忘记修改原始 JSON 显示。

在我实现表格之前，我是这样设置状态的： setMyData(JSON.stringify(jsonData, null, 2))

然后我将其替换为（在将上面的 jsonData 转换为数组之后）： setMyData(propsArray)

同时，我仍然显示原来的myData 状态，如下所示： <pre>myData</pre>

...这意味着它试图渲染 Array 对象，而之前它只是渲染 JSON 字符串化，因为我在设置它之前对其进行了字符串化。

因此，在对错误的事情进行了数小时的故障排除后，我意识到我只需要像这样将该对象（新的属性数组）字符串化： <pre>JSON.stringify(myData, null, 2)</pre>

...这就是我之前所做的（在设置状态之前进行字符串化）。这不是我第一次这样做，但希望通过发布这将是我的最后一次，也希望是你的。