对不起,如果这个问题这么简单,我想使用状态钩子在组件之间传递 props,这是第一个组件:
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,我不明白为什么,所以您的意见和建议将不胜感激。
非常感谢
答案 0 :(得分:0)
您在 <NewExpense>
中的道具上使用了错误的属性。试试这个:
const [statusForm, setStatusForm] = useState(props.statusForm);
statusForm
是您在组件上定义的 prop,statusFormHandler
是您分配给第一个组件中的 statusForm
的函数名称。
如果你真的希望你的道具名称是statusFormHandler
,那么请忽略上面的内容并使用这个
<NewExpense
onAddExpense={addExpenseHandler}
statusFormHandler={statusFormHandler}
/>