Question

我目前遇到Firebase的一些问题以及状态的使用。是的，我想指出我是React的新手。基本上我想要实现的是显示已发送给我的所有inquiries，它们存储在firebase中。

为了实现这一目标，我做了如下：

constructor(props) {
  super();

  this.fetchMessage = this.fetchMessage.bind(this);
  this.state = {
    messages: []
  };
}

fetchMessage = () => {
  const database = firebase.database();
  const inquiries = [];

  database.ref('inquiries').on('value', (snapshot) => {
    snapshot.forEach((childSnapshot) => {
      inquiries.push({
        id: childSnapshot.key,
        fullName: childSnapshot.val().fullName,
        email: childSnapshot.val().email,
        message: childSnapshot.val().message,
        subject: childSnapshot.val().subject,
        dateSent: childSnapshot.val().dateSent
      });
    });
    console.log(inquiries);
    this.setState(() => {
      return {
        messages: inquiries
      }
    });
  });
}

我要做的是将所有inquiries存储在状态中，以便我可以运行for-loop并显示我网站上的所有内容。我到底该怎么做？

我的第一个想法是，如上所述：将每个对象存储在状态中，然后访问每个查询，如this.state.messages[0]，this.state.messages[1]（以获取完整数组），然后显示每个值比如做this.state.messages[0].fullName。

我怎样才能做到这一点？我目前的错误是：

[Error] Invariant Violation: Objects are not valid as a React child (found: object with keys {id, fullName, email, message, subject, dateSent}). If you meant to render a collection of children, use an array instead.
    in h1 (created by AdminPanel)
    in div (created by AdminPanel)
    in AdminPanel (created by Route)
    in Route
    in Switch
    in div
    in Router (created by BrowserRouter)
    in BrowserRouter
    (anonymous function) (bundle.js:1530)

Answer 1

似乎问题不在于您的状态，而在于您的渲染方法。

这是您在应用中显示消息的方式。

componentDidMount() {
  this.fetchMessage()
}
render() {
  const { messages } = this.state
  return (
    <div>
      <table>
        {messages.map((message) => {
          return (
            <tr key={message.id}>
              <td>{message.fullName}</td>
              <td>{message.email}</td>
              <td>{message.message}</td>
              <td>{message.subject}</td>
              <td>{message.dateSent}</td>
            </tr>
          )
        })}
      </table>
    </div>
  )
}

在状态不起作用的React对象数组

1 个答案: