未捕获（承诺中）错误：对象作为 React chid 无效。如果您打算渲染子集合，请使用数组

Question

我试图渲染 polkadot 浏览器扩展的输出，但我收到此错误未捕获（承诺中）错误：对象作为 React 子项无效（找到：带有键 {address，meta，type} 的对象） 。如果您打算渲染子集合，请改用数组。

我看到它希望我使用数组（或地图？），但我不确定如何实现这个

有什么想法吗？

import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {
  web3Accounts,
  web3Enable,
  web3FromAddress,
  web3ListRpcProviders,
  web3UseRpcProvider
} from '@polkadot/extension-dapp';

class UserComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      allInjected: [],
      accountsInfo: []
    };
  }

  async componentDidMount() {
    this.handleButtonClick();
  }

  handleButtonClick = () => {
    const getExtensionInfo = async () => {
      const allInjected  = await web3Enable('test');
      const allAccounts = await web3Accounts();
      //const account = allInjected;
      //const info = address;
      this.setState({
        allInjected,
        allAccounts
      });

    };
    getExtensionInfo();
  };

  render() {
    const allInjected = this.state.allAccounts?.map((a, i) => (
      <li key={i} className="list-group-item">{a}</li>
    ));
    const allAccounts = this.state.allAccounts?.map((a, i) => (
      <li key={i} className="list-group-item">{a}</li>
    ));

    return (
      <div>
        <h1>A user</h1>
        <p>{allInjected}</p>
        <h1>{allAccounts}</h1>
        <button onClick={this.handleButtonClick}>Get Info</button>
      </div>
    );
  }
}

ReactDOM.render(
  <React.StrictMode>
    <UserComponent />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

Answer 1

您的渲染错误，请尝试将 {a} 替换为 {a.login} ，如下所示：

const allInjected = this.state.allAccounts?.map((a, i) => (
  <li key={i} className="list-group-item">{a.login}</li> // <=== You are using object `a`, try to change it by your field
));
const allAccounts = this.state.allAccounts?.map((a, i) => (
  <li key={i} className="list-group-item">{a.login}</li> // <=== You are using object `a`, try to change it by your field
));

Answer 2

我以前也遇到过同样的问题。基本上这意味着 a 是一个对象，react 会很困惑如何渲染它，例如，如果 a = { "user": "Mary", "login": true}，react 将不知道是否应该将其渲染为一个字符串，或者只返回值或键。

为了解决该错误，您可以指定要显示的值/键，例如 {a.user}。