Question

在编译reactJS组件时遇到问题：

php artisan migrate:rollback --path=\database\migrations\flights.php

和我的App.js：

import React, { Component } from "react";

class StatefullComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 1, name: "Perceuse" },
        { id: 2, name: "disqueuse" },
        { id: 3, name: "marteau" },
        { id: 4, name: "clé de 17" },
        { id: 5, name: "meuleuse" }
      ],
      newItem: ""
    };
    this.addNewItemToState = this.addNewItemToState.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.removeThisItem = this.removeThisItem.bind(this);
  }

  sortItems() {
    this.setState({
      items: this.state.items.sort()
    });
  }

  addNewItemToState() {
    this.setState({
      items: [...this.state.items, this.state.newItem],
      newItem: ""
    });
  }

  removeThisItem(bidule) {
    const tmparray = this.state.items.filter(bazar => {
      return bazar.id !== bidule;
    });
    console.log(tmparray);
    this.setState({
      items: tmparray
    });
  }

  handleChange(e) {
    this.setState({
      newItem: e.target.value
    });
  }

  render() {
    return (
      <div className="statefull">
        <h2>Satefull component, build with a class</h2>
        <ul>
          {this.state.items.map(item => (
            <li className="lambda">
              {item}
              <button onClick={this.removeThisItem(item.id)}>
                supprimer cet item
              </button>
            </li>
          ))}
        </ul>
        <input
          type="text"
          placeholder="Ajouter un element"
          value={this.state.newItem}
          onChange={this.handleChange}
        />
        <button onClick={this.addNewItemToState}>Ajouter</button>
      </div>
    );
  }
}

export default StatefullComponent;

为什么会出现此错误？

'错误：对象作为React子对象无效（找到：键为{id，name}的对象）。如果要渲染子级集合，请改用数组。'

我是否在状态中错误地格式化了项目数组？拥有一个ID对我来说很重要，因为我希望能够删除一个项目。有什么线索吗？谢谢。

Answer 1

那是因为您试图在map中渲染对象。将您的ul更改为此：

<ul>
 {
   this.state.items.map((item, index) => <li className="lambda" key={index}>{item.name}<button onClick={this.removeThisItem(item.id)}>supprimer cet item</button></li>)
 }
</ul>

希望这对您有用。

Answer 2

您需要使用{item.name}显示名称，而不要使用{item}显示名称。这就是您收到该错误的原因。

我也注意到了以下问题：

1-）您需要向li标签添加key属性，如下所示：<li className="lambda" key={item.id}>。 React需要列表中的键属性。

2-）您需要将onClick={this.removeThisItem(item.id)}更改为<button onClick={() => this.removeThisItem(item.id)}>。您正在调用removeThisItem方法，但不应调用它。

import React, { Component } from "react";
class StatefullComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 1, name: "Perceuse" },
        { id: 2, name: "disqueuse" },
        { id: 3, name: "marteau" },
        { id: 4, name: "clé de 17" },
        { id: 5, name: "meuleuse" }
      ],
      newItem: ""
    };
    this.addNewItemToState = this.addNewItemToState.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.removeThisItem = this.removeThisItem.bind(this);
  }

  sortItems() {
    this.setState({
      items: this.state.items.sort()
    });
  }

  addNewItemToState() {
    this.setState({
      items: [...this.state.items, this.state.newItem],
      newItem: ""
    });
  }

  removeThisItem(bidule) {
    const tmparray = this.state.items.filter(bazar => {
      return bazar.id !== bidule;
    });
    console.log(tmparray);
    this.setState({
      items: tmparray
    });
  }
  handleChange(e) {
    this.setState({
      newItem: e.target.value
    });
  }
  render() {
    return (
      <div className="statefull">
        <h2>Satefull component, build with a class</h2>
        <ul>
          {this.state.items.map(item => (
            <li className="lambda" key={item.id}>
              {item.name}
              <button onClick={() => this.removeThisItem(item.id)}>
                supprimer cet item
              </button>
            </li>
          ))}
        </ul>
        <input
          type="text"
          placeholder="Ajouter un element"
          value={this.state.newItem}
          onChange={this.handleChange}
        />
        <button onClick={this.addNewItemToState}>Ajouter</button>
      </div>
    );
  }
}

export default StatefullComponent;

Playground

错误：对象作为React子对象无效（找到：键为{id，name}的对象）

2 个答案: