Question

react的新手，我正在删除counter组件中的本地状态，并将依靠props来接收所需的数据。我相信这称为controlled component。摆脱state并将我使用this.state的每个位置更改为this.props之后，我再也无法看到单击{{1 }}按钮。我将在下面写下所有代码。

/ *计数器组件* /

increment

/ *计数器组件* /

import React, { Component } from "react";

class Counter extends Component {
renderTags() {
return (
  <ul>
    {this.state.tags.length === 0 && <p> There are no tags </p>}
    {this.state.tags.map(tag => (
      <li key={tag}> {tag} </li>
    ))}
  </ul>
    );
  }

  // You can do styles this way or do it inline
  //   styles = {
  //     fontSize: 50,
  //     fontWeight: "bold"
  //   };


 render() {
 return (
  <div>
    <span style={{ fontSize: 20 }} className={this.getBadgeClasses()}>
      {this.formatCount()}
    </span>
    <button
      onClick={() => this.props.onIncrement(this.props.counter)}
      className="btn btn-secondary btn-sm"
    >
      Increment
    </button>

    <button
      onClick={() => this.props.onDelete(this.props.counter.id)}
      className="btn btn-danger btn-sm m-2"
    >
      Delete
    </button>

    {/* {this.renderTags()}
    <p>{this.state.tags.length === 0 && "Please create a new tag"}</p> */}
  </div>
);
 }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.props.counter.value === 0 ? "warning" : "primary";
    return classes;
  }

 formatCount() {
const { count } = this.props.counter;
return count === 0 ? "Zero" : count;
  }
}

export default Counter;

Answer 1

您为key使用了错误的counter，因此看不到这些值。

formatCount() {
    const { count } = this.props.counter;
    return count === 0 ? "Zero" : count;
}

您的柜台中没有任何名为count的钥匙。这是价值。因此，您应该使用它，或者需要像这样破坏它：

const { value: count } = this.props.counter

但是，我认为使用相同的名称更为一致。同样，您的Counter组件将成为无状态组件，因为您在那里不需要任何状态或生命周期方法。

将对onClick的处理程序方法（例如onIncrement）进行另一项更改。如果使用箭头功能，则将在每个渲染中重新创建该功能。您可以使用其他处理程序方法。这是完整的工作示例（为清晰起见，对其进行了简化）。

class Counters extends React.Component {
  state = {
    counters: [
      { id: 1, value: 5 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  handleIncrement = counter => {
    const { counters } = this.state;
    const newCounters = counters.map( el => {
      if( el.id !== counter.id ) { return el; }
      return { ...counter, value: counter.value + 1 }
    } )
    this.setState({ counters: newCounters});
  };

  handleReset = () => {
    const counters = this.state.counters.map(c => {
      c.value = 0;
      return c;
    });
    this.setState({ counters });
  };

  handleDelete = counter => {
    const { id: counterID } = counter;
    const counters = this.state.counters.filter(c => c.id !== counterID);
    this.setState({ counters });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleReset} className="btn btn-dark btn-sm m-2">
          Reset
        </button>
        {this.state.counters.map(counter => (
          <Counter
            key={counter.id}
            onDelete={this.handleDelete}
            counter={counter}
            onIncrement={this.handleIncrement}
          />
        ))}
      </div>
    );
  }
}

const Counter = props => {
  const { counter, onIncrement, onDelete} = props;

  function formatCount(){
    const { value } = counter;
    return value === 0 ? "Zero" : value;
  }

  function handleIncrement(){
    onIncrement( counter );
  }

  function handleDelete(){
    onDelete( counter );
  }

  return (
    <div>
      <span>
        {formatCount()}
      </span>
      <button
        onClick={handleIncrement}
      >
        Increment
        </button>

      <button
        onClick={handleDelete}
      >
        Delete
        </button>
    </div>
  );
}

ReactDOM.render(<Counters />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

无法看到增量按钮的值

1 个答案: