Fix crashing when arrayfield has a formdata set to null (rjsf-team#2154)

* Fix runtime error in ArrayField component * Update ArrayField_test.js * Update ArrayField_test.js * fixed Co-authored-by: Ashwin Ramaswami <aramaswamis@gmail.com>

Author: TheRealJon

packages/core/src/components/fields/ArrayField.js

@@ -224,8 +224,8 @@ class ArrayField extends Component {
  updatedKeyedFormData: false,
  };
  }
- const nextFormData = nextProps.formData;
- const previousKeyedFormData = prevState.keyedFormData;
+ const nextFormData = nextProps.formData || [];
+ const previousKeyedFormData = prevState.keyedFormData || [];
  const newKeyedFormData =
  nextFormData.length === previousKeyedFormData.length
  ? previousKeyedFormData.map((previousKeyedFormDatum, index) => {

packages/core/test/ArrayField_test.js

@@ -123,6 +123,53 @@ describe("ArrayField", () => {
  });
  });
 
+ describe("Malformed nested array formData", () => {
+ const schema = {
+ type: "object",
+ properties: {
+ foo: {
+ type: "array",
+ items: { type: "string" },
+ },
+ },
+ };
+
+ it("should contain no field in the list when nested array formData is explicitly null", () => {
+ const { node } = createFormComponent({
+ schema,
+ formData: { foo: null },
+ });
+ expect(node.querySelectorAll(".field-string")).to.have.length.of(0);
+ });
+ });
+
+ describe("Nullable array formData", () => {
+ const schema = {
+ type: "object",
+ properties: {
+ foo: {
+ type: ["array", "null"],
+ items: { type: "string" },
+ },
+ },
+ };
+
+ it("should contain no field in the list when nested array formData is explicitly null", () => {
+ const { node } = createFormComponent({
+ schema,
+ formData: { foo: null },
+ });
+ expect(node.querySelectorAll(".field-string")).to.have.length.of(0);
+ });
+ it("should contain a field in the list when nested array formData is a single item", () => {
+ const { node } = createFormComponent({
+ schema,
+ formData: { foo: ["test"] },
+ });
+ expect(node.querySelectorAll(".field-string")).to.have.length.of(1);
+ });
+ });
+
  describe("List of inputs", () => {
  const schema = {
  type: "array",