警告:遇到两个具有相同键的孩子,`0`

时间:2018-06-03 21:10:18

标签: arrays reactjs html-table key mapping

我正在尝试映射数组,并在表项中显示我想要的内容。它问我一个唯一的密钥,所以我选择了以下代码,因为我在另一个组件中使用它。我很好奇为什么它不在这里工作。

renderData() {
   const { aminos } = this.props.aminos;
    return aminos.map((micro, i) => {
       return (
        <Table>
          <tbody>
             <tr>
              <th scope="row">1</th>
              <th key={i}>{micro.name}</th>
             </tr>
             <tr>
                <td key={i}>{micro.serum.current}</td>
                <td key={i}>{micro.serum.prev}</td>
                <td key={i}>{micro.serum.ref}</td>
             </tr>
           </tbody>
         </Table>
       )
   }

1 个答案:

答案 0 :(得分:2)

密钥应放在最外面的组件上。


    ERROR: /usr/local/src/bazel/third_party/ijar/BUILD:10:1: C++ compilation of rule '//third_party/ijar:zip' failed (Exit 1): gcc failed: error executing command 
       (cd /tmp/bazel_aRLoR224/out/execroot/io_bazel && \
       exec env - \
        PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin \
         PWD=/proc/self/cwd \
       /usr/bin/gcc -U_FORTIFY_SOURCE -fstack-protector -Wall -B/usr/bin -B/usr/bin -Wunused-but-set-parameter     -Wno-free-nonheap-object -fno-omit-frame-pointer -g0 -O2 '-D_FORTIFY_SOURCE=1' -DNDEBUG -ffunction-sections -fdata-sections '-std=c++0x' -MD -MF bazel-out/arm-opt/bin/third_party/ijar/_objs/zip/third_party/ijar/mapped_file_unix.d '-frandom-seed=bazel-out/arm-opt/bin/third_party/ijar/_objs/zip/third_party/ijar/mapped_file_unix.o' -DBLAZE_OPENSOURCE -iquote . -iquote bazel-out/arm-opt/genfiles -iquote external/bazel_tools -iquote bazel-out/arm-opt/genfiles/external/bazel_tools -isystem third_party/zlib -isystem bazel-out/arm-opt/genfiles/third_party/zlib -isystem bazel-out/arm-opt/bin/third_party/zlib -fno-canonical-system-headers -Wno-builtin-macro-redefined '-D__DATE__="redacted"' '-D__TIMESTAMP__="redacted"' '-D__TIME__="redacted"' -c third_party/ijar/mapped_file_unix.cc -o bazel-out/arm-opt/bin/third_party/ijar/_objs/zip/third_party/ijar/mapped_file_unix.o)
     third_party/ijar/mapped_file_unix.cc: In constructor 'devtools_ijar::MappedOutputFile::MappedOutputFile(const char*, size_t)':
     third_party/ijar/mapped_file_unix.cc:114:67: error: no matching function for call to 'min(long unsigned int, unsigned int)'
                  std::numeric_limits::max());
                                    ^

虽然此地图会显示多个表格,但也不确定这是您想要的效果。使用索引作为键也不是一个好主意,你应该使用某种类型的唯一ID,如数据库中的主键。