在Form.List的场景下使用 setFields 对应的ListItem不会触发更新

JSX

<Form.List name="sights">
  {(fields, { add, remove }) => (
    <>
      {fields.map((field) => (
        <Space key={field.key} align="baseline">
          <Form.Item
            noStyle
            shouldUpdate={(prevValues, curValues) =>
              prevValues.area !== curValues.area ||
              prevValues.sights !== curValues.sights
            }
          >
            {() => (
              <Form.Item
                {...field}
                label="Sight"
                name={[field.name, "sight"]}
                rules={[
                  {
                    required: true,
                    message: "Missing sight"
                  }
                ]}
              >
                <Select
                  disabled={!form.getFieldValue("area")}
                  style={{
                    width: 130
                  }}
                >
                  {(sights[form.getFieldValue("area")] || []).map(
                    (item) => (
                      <Option key={item} value={item}>
                        {item}
                      </Option>
                    )
                  )}
                </Select>
              </Form.Item>
            )}
          </Form.Item>
          <Form.Item
            {...field}
            label="Price"
            name={[field.name, "price"]}
            rules={[
              {
                required: true,
                message: "Missing price"
              }
            ]}
          >
            <Input />
          </Form.Item>

          <MinusCircleOutlined onClick={() => remove(field.name)} />
        </Space>
      ))}

      <Form.Item>
        <Button
          type="dashed"
          onClick={() => add()}
          block
          icon={<PlusOutlined />}
        >
          Add sights
        </Button>
        <Button onClick={resetFirstLine}>reset first line</Button>
      </Form.Item>
    </>
  )}
</Form.List>

调用JS

 const resetFirstLine = () => {
    form.setFieldValue(["sights", 0], {
      sight: 1,
      price: 123
    });
  };

当触发 resetFirstLine 的时候页面上的listItem不刷新

codesandbox地址

Start with the linked CodeSandbox demo.js and reproduce the update triggered by setFieldValue(["sights", 0], ...). Trace how Form.List and its list item subscriptions respond, then verify that resetting the first item causes the visible fields to rerender with the new values.