Question

我怀疑在地图迭代中返回组件时是否做对了。我该如何改善代码或有更好的方法呢？（尽管我的代码正在运行）

父母

        let cell1 = gamePad.cellForItem(at: [0, actualBund])
        let cell2 = gamePad.cellForItem(at: [0, actualBund + 1])
        let cell3 = gamePad.cellForItem(at: [0, actualBund + 2])
        let cell4 = gamePad.cellForItem(at: [0, actualBund + 3])

列表组件

function App() {
  return (
    <div className="App">
      {[
        {
          name: "banana",
          count: 3
        },
        {
          name: "apple",
          count: 5
        }
      ].map(({ name, count }) => {
        return <List name={name} count={count} />;
      })}
    </div>
  );
}

Answer 1

像这样简化。

function App() {
  return (
    <div className="App">
    <ul>
      {[
        {
          name: "banana",
          count: 3
        },
        {
          name: "apple",
          count: 5
        }
      ].map(({ name, count }) => <li>{name}:{count} </li>)}
      </ul>
    </div>
  );
}

Answer 2

因为要循环渲染List，所以需要将唯一值设置为List组件的键。唯一值可以是数组中每个对象的ID，也可以是.map中索引的唯一ID，但我们建议数据中每个对象具有唯一ID，并在迭代时将其用作键。

不建议将索引作为关键，但在最坏的情况下，我们可以这样做。

还添加ul元素，以便在ul下呈现li

下面的代码通过添加key，ul和.map函数而没有返回而得到改进

    function App() {
         return (
              <div className="App">
                <ul>
                 {[
                    {
                       id: 1
                       name: "banana",
                       count: 3
                    },
                    {
                     id:2,
                     name: "apple",
                     count: 5
                    }
                   ].map(({ id, name, count }) => (
                     <List key={id} name={name} count={count} />;
                ))}
              </ul>
            </div>
           );
      }

重用map函数中的react组件

2 个答案: