找不到onClick句柄不工作的原因。它说"idC“是未定义的

Question

我试图获取卡片的详细信息以打开一个新的索引页，但我一直收到一个错误，它显示"idC“是未定义的，或者它是" onClick”类型的错误(我假设这与idC有关)。我如何才能使onClick从handleDetails工作并显示displayPage？

class Products extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      value: "",
      details_id: 1,
      pageIndex: 1
    };

    //Handles filter change
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmitS = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state.value);
  }

  componentDidMount() {
    axios
      .get("/api/postings")
      .then(res => {
        console.log(res.data);
        this.setState({
          data: res.data
        });
      })
      .catch(err => {
        console.log(err);
      });
  }

  displayPage = index => {
    switch (index) {
      case 0:
        return (
          <ProductDetails
            idC={this.state.details_id}
            handleIndex={this.handleIndex}
          />
        );
      case 1:
        return (
          <ProductsList
            recipes={this.state.data}
            handleDetails={this.handleDetails}
            // handleChange={this.handleChange}
            // handleSubmit={this.handleSubmit}
            error={this.state.error}
          />
        );
      default:
    }
  };

  handleIndex = index => {
    this.setState({
      pageIndex: index
    });
  };

  handleDetails = (index, idC) => {
    this.setState({
      details_id: idC,
      pageIndex: index
    });
  };

  render() {
    // const { image_url, title, recipe_id, publisher } = this.props.recipe;
    // const { id, location, postStatus, postType, picture } = this.props.recipe;
    // const {id} = this.props.recipe;
    const { handleDetails } = this.props;

    return (
      //Search form
      <div className="Search">
        <form onSubmit={this.handleSubmit} class="form-inline my-2 my-lg-0">
          <i class="fas fa-search" aria-hidden="true"></i>
          <input
            class="form-control-sm m1-3 w-75"
            type="text"
            placeholder="Search"
            aria-label="Search"
            value={this.state.value}
            onChange={this.handleChange}
          ></input>
        </form>

        <Container>
          <Row>
            {this.state.data
              .filter(searchingFor(this.state.value))
              .map(data => (
                <React.Fragment key={data.root}>
                  <div className="col-10 mx-auto col-md-6 col-lg-4 my-3">
                    <div className="card">
                      <img
                        src={data.picture}
                        className="img-card-top"
                        alt="recipe"
                        style={{ height: "14rem" }}
                      />
                      <div className="card-body text-capitalized">
                        <h6>location: {data.location}</h6>
                        <h6 className="text-warning text-slanted">
                          postStatus: {data.postStatus}
                        </h6>
                      </div>
                      <div className="card-footer text-cen">
                        <button
                          type="button"
                          className="btn btn-primary text-capitalize"
                          onClick={() => handleDetails(0, idC)}
                        >
                          details
                        </button>
                      </div>
                    </div>
                  </div>
                </React.Fragment>
              ))}
          </Row>
        </Container>
      </div>
    );
  }
}

export default Products;

Answer 1

第一个无法设置有效的idC和索引默认值0在此处输入代码

​

class Products extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      value: "",
      details_id: 1,
      pageIndex: 1
    };

    //Handles filter change
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmitS = this.handleSubmit.bind(this);

  }

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

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state.value);
  }

  componentDidMount() {
    axios
      .get("/api/postings")
      .then(res => {
        console.log(res.data);
        this.setState({
          data: res.data
        });
      })
      .catch(err => {
        console.log(err);
      });
  }


  displayPage = index => {
    switch (index) {
      case 0:
        return (
          <ProductDetails
            idC={this.state.details_id}
            handleIndex={this.handleIndex}
          />
        );
      case 1:
        return (
          <ProductsList
            recipes={this.state.data}
            handleDetails={this.handleDetails}
            // handleChange={this.handleChange}
            // handleSubmit={this.handleSubmit}
            error={this.state.error}
          />
        );
      default:
    }
  };

  handleIndex = index => {
    this.setState({
      pageIndex: index
    });
  };

  handleDetails = (index, idC) => {
    this.setState({
      details_id: idC,
      pageIndex: index
    });
  };

  render() {
    // const { image_url, title, recipe_id, publisher } = this.props.recipe;
    // const { id, location, postStatus, postType, picture } = this.props.recipe;
    // const {id} = this.props.recipe;
    const { handleDetails } = this.props;
    return (
      //Search form
      <div className="Search">
        <form onSubmit={this.handleSubmit}
              class="form-inline my-2 my-lg-0">
          <i class="fas fa-search" aria-hidden="true"></i>
          <input class="form-control-sm m1-3 w-75" type="text" placeholder="Search"
                 aria-label="Search"
                 value={this.state.value}
                 onChange={this.handleChange}>
          </input>
        </form>
        <Container>
          <Row>
            {
              this.state.data.filter(searchingFor(this.state.value)).map((data, index) =>
                <React.Fragment key={data.root}>
                  <div className="col-10 mx-auto col-md-6 col-lg-4 my-3">
                    <div className="card">
                      <img
                        src={data.picture}
                        className="img-card-top"
                        alt="recipe"
                        style={{ height: "14rem" }}
                      />
                      <div className="card-body text-capitalized">
                        <h6>location: {data.location}</h6>
                        <h6 className="text-warning text-slanted">
                          postStatus: {data.postStatus}
                        </h6>
                      </div>
                      <div className="card-footer text-cen">
                        <button
                          type="button"
                          className="btn btn-primary text-capitalize"
                          onClick={() => handleDetails(index, data.idC)} // set your details_id or _id 
                        >
                          details
                        </button>
                      </div>
                    </div>
                  </div>
                </React.Fragment>
              )}
          </Row>
        </Container>
      </div>
    );
  }
}

export default Products;

​