如何使用 useState React hook 更改子组件中父组件的值

Question

So I am fetching random colors via fetch_API every time I click the button "Get Color" , the colors get added into an array and are listed with the.map function where also every div containing the hex value of the color is colored in that color and the button itself is also colored in the latest color. That works all fine. What I wanted to add was an input field where I manually enter a hex and if the hex exists it gets added to the array and if not it just displays an error. Here is the code of the parent component (I also added drag and drop functionality to the array)

![How it looks][1]

import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import Form from "./Form";

var but = false;

const Colors = () => {
  const [colors, setColors] = useState([]);

  //fetch the color
  const GetColors = async () => {
    const response = await fetch("https://www.colr.org/json/color/random", {
      cache: "reload",
    });
    const color = await response.json();
    but = true;
    //add into the array
    if (color.new_color === null) {
      alert("error");
      return;
    } else {
      setColors([...colors, color.new_color]);
    }
  };

  //Item reordering for drag and drop
  function handleOnDragEnd(result) {
    if (!result.destination) return;
    const items = Array.from(colors);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);

    setColors(items);
  }
  return (
    <>
      <h4>
        <DragDropContext onDragEnd={handleOnDragEnd}>
          <Droppable droppableId="colors">
            {(provided) => (
              <ul {...provided.droppableProps} ref={provided.innerRef}>
                {colors.map((color, index) => {
                  return (
                    <Draggable
                      key={color}
                      draggableId={String(color)}
                      index={index}
                    >
                      {(provided) => (
                        <li
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          ref={provided.innerRef}
                        >
                          <div
                            className="item"
                            style={{ background: "#" + color }}
                          >
                            <h4>{color}</h4>
                          </div>
                        </li>
                      )}
                    </Draggable>
                  );
                })}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
        </DragDropContext>
      </h4>
      <button
        type="button"
        className="btn"
        style={{
          background: but ? "#" + colors[colors.length - 1] : "black",
        }}
        onClick={GetColors}
      >
        Get Color
      </button>
      <Form setColors={() => setColors()} />
    </>
  );
};

export default Colors;

Now the component Form.js works in a way that has an useEffect where it checks if the user pressed enter and if he did it calls the function addColor() which should take the value of the input field with the useRef hook and check if it is a valid hex and if it is it should add it into the array of colors, but for some reason, I am getting an error saying "TypeError: Cannot read properties of undefined (reading 'map')" whenever I type anything into the input field, but if it is empty it displays the alert and no error is shown. The code of the Form js component:

import React, { useEffect, useRef } from "react";

const Form = ({ setColors }) => {
  const colorRef = useRef();
  function addColor() {
    var color = colorRef.current.value;
    console.log(color);
    if (color === "" || color === /^#[0-9A-F]{6}$/i.test("#AABBCC")) {
      alert("This color does not exist! Type a color hex that exists.");
    } else {
      setColors((prevColors) => {
        return [...prevColors, { color }];
      });
    }
    colorRef.current.value = null;
  }

  useEffect(() => {
    const listener = (event) => {
      if (event.code === "Enter" || event.code === "NumpadEnter") {
        event.preventDefault();
        addColor();
      }
    };
    document.addEventListener("keydown", listener);
    return () => {
      document.removeEventListener("keydown", listener);
    };
  }, []);
  return (
    <>
      <article>
        <form className="form">
          <div className="form-control">
            <h4>
              <label htmlFor="ColorHex">Enter hex:</label>
            </h4>
            <input ref={colorRef} type="text" id="hex" name="hex" />
          </div>
        </form>
      </article>
    </>
  );
};

export default Form;

What am I doing wrong here? I know I am missing the setColors() in some way but how?

Answer 1

Does switching:

<Form setColors={() => setColors()} />

to:

<Form setColors={setColors} />

Fix your issue? You don't need to create an anonymous function here.