React道具不确定

Question

我非常新手反应，所以这是我的第一个问题。

我无法在儿童组成部分中访问道具。 我需要将功能从父母传递给孩子们， 从孩子那里获取数据。

浏览器控制台中的错误代码：

eppenseform.js：27未熟练的typeerror：props.saveexpensedata不是 功能 在subsithandler（eppenseform.js：27：1）

我试图将“测试”支架记录到控制台，但它也不确定。 认为道具有问题。

因此，

import React from 'react';
import ExpenseForm from './ExpenseForm';

const NewExpense = () => {
  const saveExpenseDataHandler = enteredExpenseData => {
    const expenseData = {
      ...enteredExpenseData,
      id: Math.random().toString,
    };
    console.log(expenseData);
  };

  return (
    <div>
      <ExpenseForm onSaveExpenseData={saveExpenseDataHandler} test="test" />
    </div>
  );
};

export default NewExpense;

我

import React, { useState } from 'react';

function ExpenseForm(props) {
  const [enteredTitle, setEnteredTitle] = useState('');
  const [enteredAmount, setEnteredAmount] = useState('');
  const [enteredDate, setEnteredDate] = useState('');

  const titleChangeHandler = e => {
    setEnteredTitle(e.target.value);
  };

  const amountChangeHandler = e => {
    setEnteredAmount(e.target.value);
  };

  const dateChangeHandler = e => {
    setEnteredDate(e.target.value);
  };

  const submitHandler = e => {
    e.preventDefault();
    const expenseData = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };
    props.onSaveExpenseData(expenseData);
    console.log(props.test);
    setEnteredTitle('');
    setEnteredAmount('');
    setEnteredDate('');
  };

+ return

Answer 1

首先会破坏您的道具，然后使用它。此外，您的expensedata是一个对象，而save expensedatahandler是一个函数，因此当然，onsaveExpensEdata会期望孩子中的功能。

import React, { useState } from 'react';

function ExpenseForm(props) {
  const {onSaveExpenseData, test} = props
  const [enteredTitle, setEnteredTitle] = useState('');
  const [enteredAmount, setEnteredAmount] = useState('');
  const [enteredDate, setEnteredDate] = useState('');

  const titleChangeHandler = e => {
    setEnteredTitle(e.target.value);
  };

  const amountChangeHandler = e => {
    setEnteredAmount(e.target.value);
  };

  const dateChangeHandler = e => {
    setEnteredDate(e.target.value);
  };

  const submitHandler = e => {
    e.preventDefault();
    const expenseData = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };
    onSaveExpenseData(expenseData);
    console.log(test);
    setEnteredTitle('');
    setEnteredAmount('');
    setEnteredDate('');
  };

 return

Answer 2

现在正在工作！

我的错是，我已经在app.js（主文件）而不是parent component（newexpenses.js）中渲染了子组件（eppenseform.js），
因此，我认为父母连接不存在。