react props错误: props.onAnswer不是函数

Question

我正在尝试制作一个表单，并将每种类型的问题分成多个组成部分，它成功地呈现了出来，但是当我尝试向<Input>中输入一些东西时，它给出了错误

这是显示每个问题并回答它的页面

import { Form, Button, Popconfirm, Icon, Input, Radio, Collapse, Checkbox } from 'antd';
import Axios from 'axios';
import CompanyContext from '../util/UserContext';
import InputOnly from '../components/InputOnly';

export default function Hitung() {

    let [loading, setLoading] = useState(false);
    let [form, setForm] = useState([]);
    let [soal,setSoal] = useState([]);
    let [pilihan, setPilihan] = useState([]);
    let [test,setTest] = useState([1,2,3,4,5]);
    let [answer, setAnswer] = useState("");

    const company = useContext(CompanyContext);

    useEffect( () => {
        async function getData(){
            try{
                let data = await Axios.get('http://localhost:5000/lelang/getquestion');
                setSoal(data.data.pertanyaan);
            }
            catch(e){
                console.log(e);
            }
        }
        getData();
    },[]);

      function onAnswer(data){
        setLoading(false)
        setAnswer(data)
    }

    const RenderButton = ()=>{

        return(
            <div style={{textAlign:"center"}}>
            <button type="primary"  onPress={(submit)}>
            Simpan
            </button>
            </div>
        )


    }

 const RenderQuestion = ()=>{
     if (soal.length!=0){
       return soal.map(data=>{
           switch(data.type_question){
            case "input_only":
                return(<InputOnly data = {data}  />)
                }
        })
     }
     else{
         return(<h2 style={{textAlign:"center"}}>Loading....</h2>)
     }
}


//insert_answer

    async function submit(e) {
        setLoading(true);
        e.preventDefault();
            try {
              const token = await Axios.post('http://localhost:5000/lelang/insert_answer', company.data, );

            }
            catch (e) {
             alert("error " + e)
            }
        setLoading(false);
    }

    return (
        <div>
        <h1 style={{ textAlign: 'center' }}>Input Penilaian {company.data}</h1>
        <div style={{padding:'30px'}}>
        <form>
            <RenderQuestion />
            <RenderButton/>
        </form>
        </div>
        </div>
    );
}

这是用于InputOnly的组件

import {  Input, Form } from 'antd';


export default function InputOnly (props){
    let[inputOnly,setInputOnly]=useState({});
    let [temp,setTemp]=useState('');
    useEffect(()=>{
        setInputOnly(props.data);
    },[]);
    return (
        <div>
        <p style={{fontWeight:"bold"}}>{inputOnly.question}</p>
        {/* <Form.Item required> */}
            <input style={{ width: '20%' }}
             onChange={data => props.onAnswer(data.target.value)}
            //   onBlur={()=>props.onAnswer(temp)}
            >
              </input> 
            <br/>
            {/* </Form.Item> */}
        </div>
    )
}

这就是错误

​

我认为我的代码没有问题，但不知何故，它仍然给我错误。请帮帮我，我已经试了3天了，谢谢！

Answer 1

也传递你的函数

return(<InputOnly data = {data}  onAnswer={onAnswer}/>)

Answer 2

在InputOnly中添加onAnswer道具

<InputOnly data = {data} onAnswer={(data)=>{ console.log(data)}}  />