使用状态钩子在组件之间传递道具

Question

对不起，如果这个问题这么简单，我想使用状态钩子在组件之间传递道具，这是第一个组件：

import React, { useState } from "react";
import NewExpense from "../components/Expenses/NewExpense/NewExpense";
import Expenses from "../components/Expenses/Expenses";
import "../components/Expenses/NewExpense/ExpenseForm.css";

const DUMMY_EXPENSES = [
  {
    id: "e1",
    title: "Lego Simpsons",
    amount: 100.5,
    date: new Date(2021, 1, 15),
  },
  {
    id: "e2",
    title: "Lego Mindstorms",
    amount: 200.5,
    date: new Date(2021, 2, 15),
  },
  {
    id: "e3",
    title: "Lego Batman",
    amount: 300.5,
    date: new Date(2021, 3, 15),
  },
  {
    id: "e4",
    title: "Lego Star Wars",
    amount: 400.5,
    date: new Date(2021, 4, 15),
  },
];

const VerExpensesV3 = () => {
  const [expenses, setExpenses] = useState(DUMMY_EXPENSES);
  const [showForm, setShowForm] = useState(false);

  const addExpenseHandler = (expense) => {
    setExpenses((prevExpenses) => {
      return [expense, ...prevExpenses];
    });
  };

  const statusFormHandler = () => {
    return showForm;
  }

  const showFormHandler = () => {
    setShowForm(true);
  };

  return (
    <div>
      <h1>My expenses</h1>
      {showForm && (
        <NewExpense
          onAddExpense={addExpenseHandler}
          statusForm={statusFormHandler}
        />
      )}
      <div className="new-expense__actions">
        <button onClick={showFormHandler}>Add New Expense</button>
      </div>
      <Expenses records={expenses} />
    </div>
  );
};

export default VerExpensesV3;

这是第二个：

import React, { useState } from 'react';
import './NewExpense.css';
import ExpenseFormV2 from './ExpenseFormV2';


const NewExpense = (props) => {
    const [statusForm, setStatusForm] = useState(props.statusFormHandler);
    console.log("el valor de statusForm en NewExpense es: "+statusForm);

    const saveExpenseDataHandler =
        (enteredExpenseData) => {
            const expenseData = {
                ...enteredExpenseData,
                id: Math.random().toString()
            };
            props.onAddExpense(expenseData);
        };


    return (
        <div className="new-expense">
            <ExpenseFormV2
                onSaveExpenseData={saveExpenseDataHandler} 
                currentStatusForm={statusForm}/>
        </div>
    )
};

export default NewExpense;

到目前为止，我被困住了，因为在这些方面：

const [statusForm, setStatusForm] = useState(props.statusFormHandler);
console.log("el valor de statusForm en NewExpense es: "+statusForm);

我得到“未定义”，从我的角度来看，从组件 1 到组件 2 传递的值是 NULL，我不明白为什么，所以您的 cmets 和建议将不胜感激。

非常感谢

Answer 1

您在 <NewExpense> 的 props 上使用了错误的属性。试试这个：

const [statusForm, setStatusForm] = useState(props.statusForm);

statusForm 是您在组件上定义的 prop，statusFormHandler 是您在第一个组件中分配给 statusForm 的函数名称。

如果您确实希望您的道具名称为statusFormHandler，请忽略上述内容并使用此

<NewExpense
  onAddExpense={addExpenseHandler}
  statusFormHandler={statusFormHandler}
/>