Несколько раз дочерний компонент в родительском компоненте не работает в React + Redux

Question

Дочерний компонент используется 3 раза в родительском компоненте в React. Дочерний компонент включает в себя элемент формы, и приложение должно сохранять каждый другой тип документов, но в одной коллекции в Firestore.

Проблема заключается в том, что все формы изменяются, когда я пытаюсь редактировать первую форму. Второй и третий не должны обновляться одновременно. И this.props.fetchItem(id) обновляется для всех дочерних компонентов. Я хочу установить каждое значение в каждом дочернем компоненте.

• Дочерний компонент (элемент. js)

class Item extends Component {
  componentDidMount() {
    const { id } = this.props;
    this.props.fetchItem(id);
  }

  onSubmit = values => {
    const { item } = this.props;
    this.props.updateItem(item.uid, values);
    this.setState({ success: true });
  };

  render() {
    const {
      handleSubmit, item
    } = this.props;
    return (
      <div>
        <form className="formItem" onSubmit={handleSubmit(this.onSubmit)}>
          <Field
            label={"Item"}
            name="content"
            value={item.content}
            component={ItemForm}
          />
          <div className="formBtn">
            <button type="submit">
              Save Changes
            </button>
          </div>
        </form>
      </div>
    );
  }
}

const mapDispatchToProps = { fetchItem, updateItem };

function mapStateToProps({ items }) {
  return {
    item: items,
    initialValues: {
      content: items.content
    }
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(reduxForm({ form: "itemsForm", enableReinitialize: true })(Item));

• Компонент визуализации формы ( item_form. js)

const ItemForm = ({
  input,
  label,
  meta: { touched, error }
}) => {
  return (
    <div>
      <p>{label}</p>
      <textarea {...input} placeholder={placeholder} rows="6" />
      <p className="errorForm">{touched && error && <span>{error}</span>}</p>
    </div>
  );
};

export default ItemForm;

• Родительский компонент (правка. js)

class Settings extends Component {
  render() {
    <div>
      <Item id="1" />
      <Item id="2" />
      <Item id="3" />
    </div>
  }
}

• Действие Redux

// Fetch item
export function fetchItem(id) {
  return dispatch => {
      firebase.firestore().collection('items')
        .where("id", "==", Number(id))
        .get()
        .then(function(querySnapshot) {
          querySnapshot.forEach(function(doc) {
            dispatch({ type: FETCH_ITEM, payload: doc.data() });
          });
        });
    });
  };
}

// Update item
export function updateItem(uid, values) {
  return dispatch => {
    firebase.firestore().collection('items')
      .where("id", "==", Number(id))
      .get()
      .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
          doc.ref.update({
            content: values.content
          });
          dispatch({ type: UPDATE_ITEM });
        });
      });
  };
}

Answer 1

TL; DR :

Для каждой формы используется одно и то же свойство form, которое вместо должно быть уникальным идентификатором для каждой формы. Решение состоит в том, чтобы удалить свойство form из reduxForm параметров и передать его как опору вашему компоненту формы.

Подробный ответ здесь