reactjs - Uncaught (in promise) 错误：对象作为 React chid 无效。如果您打算渲染一组孩子，请改用数组

Question

我试图渲染 polkadot 浏览器扩展的输出，但我收到此错误Uncaught (in promise) 错误：对象作为 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
));