如何使用 react-redux 为多个对象设计状态？

Question

我需要在这里创建多个医学对象。我只想将状态更改为对象数组。如何有效地做到这一点？另外，想实现多个药物对象形式的受控组件。

这是我的单个药物对象的组件：

export class MedicineForm extends Component {
    state = {
        medicine_name: "",
        details: ""
    }

    static propTypes = {
        postMedicine: PropTypes.func.isRequired
    }

    onChange = e => {
        this.setState({
          [e.target.name]: e.target.value
        })
    }

    onSubmit = e => {
        e.preventDefault()
        const { medicine_name, details } = this.state
        const medicine = { medicine_name, details }
        this.props.postMedicine(medicine)
        // Following code works as desired.  Need to change state in this JSON Array of objects.

        // this.props.postMedicine([
        //  {
        //      "id": 14,
        //      "medicine_name": "many5",
        //      "details": "sdknas"
        //  },
        //  {
        //      "id": 15,
        //      "medicine_name": "many6",
        //      "details": "sdknas"
        //  }
        // ])
    }

    render() {
        const { medicine_name, details } = this.state

        return (
          <Fragment>
            <h1>Add Medicine</h1>
            <form className="card card-body" onSubmit={this.onSubmit}>
              <div className="form-row">
                <div className="form-group col-md-3">
                  <label htmlFor="medicine_name">Medicine Name</label>
                  <input type="text" className="form-control" name="medicine_name" id="medicine_name" placeholder="Medicine Name" value={medicine_name} onChange={this.onChange} />
                </div>
                <div className="form-group col-md-3">
                  <label htmlFor="details">Details</label>
                  <input type="text" className="form-control" name="details" id="details" placeholder="Details" value={details} onChange={this.onChange} />
                </div>
                <div className="form-group mx-auto mt-3">
                  <button type="submit" className="btn btn-primary btn-lg">
                    Submit
                  </button>
                </div>
              </div>
            </form>
          </Fragment>
        )
    }
}

在行动中，我添加了以下 postMedicine 方法：

export const postMedicine = (medicine) => dispatch => {
    axios.post('./api/medicine/', medicine)
        .then(res => {
            dispatch({
                type: POST_MEDICINE,
                payload: res.data
            })
        })
        .catch(err => console.log(err))
}

Answer 1

//this is one row, add multiple rows as needed        
state = {
    medicines: [{medicine_name: "",
            details: ""
    }]
    }
    //other code

    onChange = (e, i) => {
        const newMedicines = this.state.medicines;
        newMedicines[i] = {[e.target.name]: e.target.value, ...newMedicines[i]}
        this.setState({medicines: newMedicines})
    }

    onSubmit = e => {
        e.preventDefault()
        const { medicine_name, details } = this.state
        const medicine = { medicine_name, details }
        this.props.postMedicine(medicine)
        // Following code works as desired.  Need to change state in this JSON Array of objects.

        // this.props.postMedicine(this.state.medicines)
    }


    <form className="card card-body" onSubmit={this.onSubmit}>
                  {this.state.medicines.map((m, i) => (<div className="form-row">
                    <div className="form-group col-md-3">
                      <label htmlFor="medicine_name">Medicine Name</label>
                      <input type="text" className="form-control" name="medicine_name" id="medicine_name" placeholder="Medicine Name" value={m.medicine_name} onChange={(e) => this.onChange(e, i)} />
                    </div>
                    <div className="form-group col-md-3">
                      <label htmlFor="details">Details</label>
                      <input type="text" className="form-control" name="details" id="details" placeholder="Details" value={m.details} onChange={(e) => this.onChange(e, i)} />
                    </div>
                    <div className="form-group mx-auto mt-3">
                      <button type="submit" className="btn btn-primary btn-lg">
                        Submit
                      </button>
                    </div>
                  </div>))}
                </form>

Answer 2

Form 组件有两个参数（又名 props）。 第一个是item，它决定了你需要多少表格。 1 个表格意味着您有两个输入组 [medicine_name,details] 2 = 4 输入（2 组） ...等

第二个道具是名为formHandler的函数。 从孩子那里提升数据

export class MedicineForm extends Component {
  state = {
    medicine: [],
  };

  static propTypes = {
    postMedicine: PropTypes.func.isRequired,
  };

  formHandler = (value) => {
    this.setState({ medicine: value });
  };

  onSubmit = (e) => {
    e.preventDefault();
    this.props.postMedicine(this.medicine);
  };

  render() {
    return (
      <>
        <h1>Add Medicine</h1>
        {JSON.stringify(this.state.medicine)}
        <form className="card card-body" onSubmit={this.onSubmit}>
          <Form item="4" formHandler={this.formHandler} />
          <div className="form-group mx-auto mt-3">
            <button type="submit" className="btn btn-primary btn-lg">
              Submit
            </button>
          </div>
        </form>
      </>
    );
  }
}

表单组件

class Form extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    medicine: [...Array(+this.props.item)].map((_, idx) => ({
      id: idx + 1,
      medicine_name: "",
      details: "",
    })),
  };
  static propTypes = {
    item: PropTypes.string,
    formHandler: PropTypes.func,
  };

  onChange = ({ target: { id, name, value } }) => {
    this.setState((prevState) => {
      const medicine = prevState.medicine.map((item) =>
        item.id === Number(id) ? { ...item, [name]: value } : item
      );
      this.props.formHandler(
        medicine.filter((item) => item["medicine_name"] || item["details"])
      );
      return {
        medicine,
      };
    });
  };

  render() {
    return (
      <div className="form-row">
        {this.state.medicine.map((item, id) => (
          <div key={item.id}>
            <div className="form-group col-md-3">
              <label htmlFor="medicine_name">Medicine Name</label>
              <input
                type="text"
                className="form-control"
                name="medicine_name"
                id={item.id}
                value={item.medicine_name}
                placeholder="Medicine Name"
                onChange={this.onChange}
              />
            </div>
            <div className="form-group col-md-3">
              <label htmlFor="details">Details</label>
              <input
                type="text"
                className="form-control"
                name="details"
                id={item.id}
                value={item.details}
                placeholder="Details"
                onChange={this.onChange}
              />
            </div>
          </div>
        ))}
      </div>
    );
  }
}

检查对象是否有一些价值然后提升数据。 您可以更改逻辑可选

medicine.filter((item) => item["medicine_name"] || item["details"])

Answer 3

你可以在 redux 商店里做这样的事情：

[
  { id: 1, medicineName: '', details: '' },
  { id: 2, medicineName: '', details: '' },
  ...
]

并且要控制您的输入字段，只需处理组件中的状态即可。