Question

我有一个从Firebase收到的对象，现在我需要以某种方式遍历它并显示它。问题的一部分是Firebase为架构中的每个条目赋予唯一的标识符，这意味着我必须做一些javascript“魔术”来获取我的数据。

到目前为止，这是我所拥有的，但是我在整个关键问题上都存在疑问（波纹管当前出现错误：Warning: Each child in a list should have a unique "key" prop.）。我还没有在线找到任何确定的帮助，因此我们非常感谢您。

firebase中的数据如下所示：

fooData
- 随意的随机编号
  - 标题
  - 日期
  - 降价文字

编辑：要清楚，这个问题的第二部分是我应该如何提取所需的数据？（标题，日期，减价）。这个map函数似乎是最有前途的方法，但是我不确定如何获取子元素。目前，我没有任何信息（空）。我假设这是因为title，date，markdown子级更深一层，并且不存在于对象的当前根元素上。

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            firebase: props.firebase,
            data: null
        }
    }

    componentDidMount() {
        const dataRef = firebase.database().ref('link/fooData');
        dataRef.on('value', snapshot => {
            this.setState({
                data: snapshot.val()
            });
        });
    }

    render() {
        return (
            <div className="container">
            {(this.state.data) ? (
                <div>
                    {Object.keys(this.state.data).map((key) => {
                        return (
                            <Row>
                                <Col lg={2}><p key={key}>{this.state.data[key].title}</p></Col>
                                <Col lg={2}><p key={key}>{this.state.data[key].date}</p></Col>
                                <Col lg={8}><ReactMarkdown key={key}>{this.state.data[key].markdownText}</ReactMarkdown></Col>
                            </Row>
                        )
                    })}
                </div>
            ) : null}
            </div>
        )
    }
}

Answer 1

尝试像这样添加密钥

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
  <div class="form-check form-check-inline">
    <input
      class="form-check-input"
      type="checkbox"
      id="inlineCheckbox1"
      value="option1"
    />
    <label class="form-check-label" for="inlineCheckbox1">Filipino</label>
  </div>
  <div class="form-check form-check-inline">
    <input
      class="form-check-input"
      type="checkbox"
      id="inlineCheckbox2"
      value="option2"
    />
    <label class="form-check-label" for="inlineCheckbox2"
      >Dual Citizenship</label
    >
  </div>
</div>

<div id="hidden">
  <div class="form-row">
    <div class="form-check form-check-inline">
      <input
        class="form-check-input"
        type="checkbox"
        id="inlineCheckbox1"
        value="option1"
      />
      <label class="form-check-label" for="inlineCheckbox1">By birth</label>
    </div>
    <div class="form-check form-check-inline">
      <input
        class="form-check-input"
        type="checkbox"
        id="inlineCheckbox2"
        value="option2"
      />
      <label class="form-check-label" for="inlineCheckbox2"
        >By Naturalize</label
      >
    </div>
  </div>
</div>

有关更多信息，您可以参考docs

Answer 2

techguru的答案是否有效取决于您的情况。但是，对我而言，我必须克服firebase对象中的唯一键。

为此，我在快照上使用了forEach循环：

dataRef.on('value', (snapshot) => {
    snapshot.forEach(item => {
        this.setState({data: this.state.data.concat(item.val().data)});
    });
});

从这里开始，获取状态并在render()中显示数据，类似于techguru的答案。

希望这个答案加上techguru的答案会很好地汇编信息：）

如何遍历并显示从Firebase（实时数据库）收集的项目列表

2 个答案: