Question

我有一个组件应该采用数字输入列表（skus）并返回div这些skus的格式化版本。我的组件部分工作，因为它按预期返回我想要的SKU。但是，我并不认为它应该100％正常工作。

我的fetchSkuList()辅助函数中有一个console.log，在页面加载/刷新时，我看到它被调用了两次。我很难看到如何在页面加载时调用一次，更不用说两次了。有没有我没见过的东西？

import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form'
import { Button, Form, Label, Input } from 'reactstrap';
import { connect } from 'react-redux';
import { CSVSkus } from '../actions';

class SkuFormatter extends Component {
  renderField(field) {
    const { meta: { touched, error } } = field;
    const className = `form-control ˀ${touched && error ? "is-invalid" : ""}`;
    return (
      <div className="col-md-6 offset-md-3">
        <Label>{field.label}</Label>
        <Input
          className={className}
          type="textarea"
          rows={5}
          {...field.input}
        />
        <div className="invalid-feedback">{touched ? error : ''}</div>
      </div>
    );
  }

  fetchSkuList() { // TODO refactor into its own component
    console.log("fetch skulist: ", this.props.skuList);
    if (this.props.skuList.length === 0) {
      return (
        <p>please input some SKUs</p>
      );
    } else {
      return (
        <p>{this.props.skuList.toString()}</p>
      );
    }
  }

  onSubmit(values) {
    this.props.CSVSkus(values);
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <div>
        <div>
        <Form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <Field
            label="SKU List"
            name="skuList"
            component={this.renderField}
          />
          <Button color="primary" type="submit">Format</Button>
          </Form>
        </div>
        <div>new list: {this.fetchSkuList()}</div>
      </div>
    )
  }
}

function validate(values) {
const errors = {};

  if (!values.skuList) {
    errors.skuList = "Please input SKUs into the field.";
  }
  return errors;
}

function mapStateToProps(state) {
  return {
    skuList: state.skuList
  }
}

export default reduxForm({
  validate,
  form: 'PostsNewForm'
})(
  connect(mapStateToProps, { CSVSkus })(SkuFormatter)
);

Answer 1

<div>new list: {this.fetchSkuList()}</div>在您的组件呈现时调用fetchSkuList()。

在页面加载/刷新时连续两次调用组件帮助程序函数

1 个答案: