**已关闭。**此问题为not reproducible or was caused by typos。目前不接受答案。

这个问题是由一个打字错误或一个无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic，但这个问题的解决方式不太可能帮助未来的读者。
19个小时前关门了。
Improve this question
我一直试图将一个简单的值从子组件传递到父组件，但是每次触发从父组件传递到子组件的函数时，都会得到一个错误：无法读取undefined的属性。我看过一些例子，没有发现什么问题。我知道一个简单的下拉菜单可以很容易地实现到一个组件中，但我想保持独立。下面是父组件的代码：

import React, { useState } from "react";
import Axios from "axios";
import "../css/app.css";
import ClassesDropdown from "./ClassesDropdown";

function CreateCharacter() {
  const [name, setName] = useState("");
  const [race, setRace] = useState("");
  const [classId, setClassId] = useState("1");
  const [level, setLevel] = useState("");
  const [creatorId, setCreatorId] = useState("");
  const [campaignId, setCampaignId] = useState("");
  const [description, setDescription] = useState("");

  const submitPost = () => {
    Axios.post("http://localhost:3002/api/characters/create", {
      name: name,
      race: race,
      classId: classId,
      level: level,
      creatorId: creatorId,
      campaignId: campaignId,
      description: description,
    });
  };

  const getClassDropdown = (selectedClass) => {
    setClassId(selectedClass);
    console.log("Class is selected!");
  };

  return (
    <div>
      <div className="boxed">
        <span className="formTitle">Create a character:</span>
        <div>
          <label>Name: </label>
          <input
            type="text"
            onChange={(e) => {
              setName(e.target.value);
            }}
          />
        </div>

        <div>
          <label>Race: </label>
          <input
            type="text"
            onChange={(e) => {
              setRace(e.target.value);
            }}
          />
        </div>

        <div>
          <label>Class: </label>
          <ClassesDropdown onClassFetch={getClassDropdown} />
        </div>

        <div>
          <label>Level: </label>
          <input
            type="number"
            onChange={(e) => {
              setLevel(e.target.value);
            }}
          />
        </div>

        <div>
          <label>Creator:</label>
          <input
            type="number"
            onChange={(e) => {
              setCreatorId(e.target.value);
            }}
          />
        </div>

        <div>
          <label>Campaign: </label>
          <input
            type="number"
            onChange={(e) => {
              setCampaignId(e.target.value);
            }}
          />
        </div>

        <div>
          <label>Description: </label>
          <textarea
            onChange={(e) => {
              setDescription(e.target.value);
            }}
          />
        </div>

        <div>
          <label>Image: </label>
          <input
            type="file"
            onChange={(e) => {
              console.log("Image:", e);
            }}
          />
        </div>

        <button onClick={submitPost}>Create a Character</button>
      </div>
    </div>
  );
}

export default CreateCharacter;

和子组件的代码：

import React, { useState, useEffect } from "react";
import Axios from "axios";
import "../css/app.css";

function ClassesDropdown({ props }) {
  const [classList, setClassList] = useState([]);

  useEffect(() => {
    Axios.get("http://localhost:3002/api/classes/get").then((data) => {
      console.log(data);
      setClassList(data.data);
    });
  }, []);

  const selectHandler = (e) => {
    props.onClassFetch(e.target.value);
  };

  return (
    <div>
      <select name="classesSelect" onChange={selectHandler}>
        {classList.map((val, key) => {
          return (
            <option key={key} value={val.id}>
              {val.class}
            </option>
          );
        })}
      </select>
    </div>
  );
}

export default ClassesDropdown;

我尝试只控制台日志记录从下拉菜单中选择的值，它得到了正确的值，只是当我尝试执行props.onClassFetch时，我得到了错误。