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

Posted 2023-02-21

【中文标题】使用状态钩子在组件之间传递道具

【英文标题】：Pass props between components using state hook

【发布时间】：2021-09-06 08:30:53

【问题描述】：

对不起，如果这个问题这么简单，我想，这是第一个组件：

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 和建议将不胜感激。

非常感谢

【参考方案1】：

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

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

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

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

<NewExpense
  onAddExpense=addExpenseHandler
  statusFormHandler=statusFormHandler
/>

【讨论】：

完全正确，非常感谢您的解决方案，我正在对道具和状态感到满意。最美好的祝愿