ruby-on-rails - React 新功能 : Why is one array treated differently than the other?

Question

我正在开发一个 React 应用程序，该应用程序从 Rails api 提供数据。我目前正在开发一个包含嵌套关联的表单(即 model_a 中有许多 model_b，您可以以相同的表单创建它们)。

我遇到的问题是，Rails 期望与特定命名约定进行嵌套关联，并且控制参数发送到 Rails 时如何命名的相同字段也控制在 Rails API 响应时 React 如何找到正确的数据。

这在编辑页面上会出现问题，因为我想显示 models_a 的( Retailers )已经存在的 model_b 的(本例中为 SpendingThresholds )，并且当我更改“名称”字段以适应 Rails 方面时，React 不会不知道在哪里可以找到这些数据了。当我尝试直接传递数据时，它作为不同类型的数组传入，并且某些函数失败。

我认为在这里展示比讲述更容易

最初我有这个

<FieldArray
  name="spending_thresholds"
  component={renderSpendingThresholds}
/>

数据就像这样通过

Object {_isFieldArray: true, forEach: function, get: function, getAll: function, insert: function…

从 Rails API 到我的 React 应用程序，它有效，但是这个“名称”不符合 Rails 的喜好(Rails 希望将其称为“spending_thresholds_attributes”以 accepts_nested_attributes 工作)，所以我将其更改为

<FieldArray
  name="spending_thresholds_attributes"
  fields={this.props.retailer.spending_thresholds}
  component={renderSpendingThresholds}
/>

数据开始传入renderSpendingThresholds这种格式的组件

[Object]
  0:Object
  length:1
  __proto__:Array(0)

出于某种原因，React 不喜欢它。

有人知道如何解决这个问题/为什么这两个对象(无论如何都从 Rails 端保存相同的信息)被不同地对待？

编辑

renderSpendingThresholds 组件

fields renderSpendingThresholds 中的属性组件是根据我输入方式的不同而不同的对象

const renderSpendingThresholds = ({ fields }) => (
 <ul className="spending-thresholds">
    <li>
      <Button size="sm" color="secondary" onClick={(e) => {
          fields.push({});
          e.preventDefault();
        }
      }>
        Add Spending Threshold
      </Button>
    </li>
    {fields.map((spending_threshold, index) => (
      <li key={index}>
        <h4>Spending Threshold #{index + 1}</h4>
          <Button
            size="sm"
            color="danger"
            title="Remove Spending Threshold"
            onClick={() => fields.remove(index)}
          >
            Remove
          </Button>
        <Field
          name={`${spending_threshold}.spend_amount`}
          type="number"
          component={renderField}
          label="Spend Amount"
          placeholder="0"
        />
        <Field
          name={`${spending_threshold}.bonus_credits`}
          type="number"
          component={renderField}
          label="Bonus Credits"
          placeholder="0"
        />
      </li>
    ))}
  </ul>
);

Answer 1

看起来您正在通过 props 传递字段，然后在 renderSpendingThresholds 的回调中从 props 中解构 fields 并丢弃其余部分。根据文档，特定的 redux-form 对象被传递给 render 回调。你基本上是在覆盖这个。尝试将 {field} 更改为 member 或 spending_threshold 之类的内容。然后，您可以使用特定的 map 函数来迭代 spending_threshold 项。您的 field 属性应该仍然可以在 member.fields 或类似的东西下使用。