0

我有一个获取项目（对象）列表的反应组件。当我将它传递给孩子时 - 这是一个点燃的元素。它以未定义的形式返回。

我已确保数据正在返回。还尝试对一组对象进行硬编码。仍然没有运气。

TypeError: Cannot read property 'name' of undefined

我似乎无法弄清楚为什么它按定义显示。当我从对象传递单个值时，它可以工作，但是当整个对象传递给子对象时，它是未定义的。

React js 父组件：

const ListExample = () => {
  const [pokemons, setPokemons] = useState([]);

  useEffect(() => {
    getPokemons().then((response) => {
      setPokemons(response.data.pokemons);
    });
  }, []);

  return (
    <div>
      {pokemons.map((item, i) => (
        <poke-card key={item.id} item={item}></poke-card>
      ))}
    </div>
  );
};

export default ListExample;

儿童 - 点亮元素

import { LitElement, html, css } from "lit-element";

class PokemonCard extends LitElement {
  static styles = css`
    .card {
      background: white;
      border-radius: 1rem;
      padding: 2rem;
      box-shadow: 4px 4px 12px 2px rgba(0, 0, 0, 0.75);
      height: 500px;
      transition: 0.2s;
    }
    .card:hover,
    .card:focus-within {
      transform: translateY(-5rem);
    }
  `;

  static get properties() {
    return {
      item: { type: Object }
    };
  }

  render() {
    const { item } = this;

    return html`
      <div>
        <p>${item.name}</p>
      </div>
    `;
  }
}

customElements.get("poke-card") ||
  customElements.define("poke-card", PokemonCard);
4

2 回答 2

0

您将 item 设置为等于您传递给它的所有整个道具。直接看名字就行了。

<p>${this.props.item.name}</p>
于 2021-08-20T13:49:36.933 回答
0

好的，所以我必须对 lit 元素的对象进行 JSON 字符串化才能拾取它。

于 2021-08-21T11:13:50.767 回答