多次渲染反应组件onClick

Posted 2023-02-22

【中文标题】多次渲染反应组件onClick

【英文标题】：Render react component multiple times onClick

【发布时间】：2022-01-08 05:24:09

【问题描述】：

您好，我正在开发一个费用跟踪器，老实说，我已经坚持了太久了。我正在尝试多次渲染我的 Expense 组件。我知道我需要 .map 它，所以我不确定我应该如何从我所在的位置进行操作。任何帮助都会很棒，我很难真正突破反应。即使我在这个基本应用程序上苦苦挣扎，我也觉得我就在那里。

const initialValues = payment: '', purchase: '', date:'', location: '', price: '';
const [formValues, setFormValues] = useState([initialValues]);

const onHandleChange = (e) => 
  const value = e.target.value;
  setFormValues(...formValues,
  [e.target.name]: value
  );

以下是我尝试渲染多个费用组件的方式

 const userRows = Object.keys(formValues).map((value) =>
   <Expense formValues=value />
 )
 console.log(userRows)
  return(
<table className="expense-container">
<tbody className='expense-list'>
userRows

下面是我的费用部分

  return(
  
    <tr className='tableRow expense'>
  <td className="mr-2">formValues.payment</td>
  <td className="mr-1">formValues.purchase</td>
  <td className="mr-1">formValues.date</td>
  <td className="mr-1">formValues.location</td>
  <td className="mr-1">formValues.price</td>
</tr>
  )

【问题讨论】：

我认为你错过了地图内的回报，它必须是回报

【参考方案1】：

就像 Diego 说的那样，您缺少 userRows 映射函数的 return 语句。当您将 formValue 属性传递给 Expense 组件时，您只是从对象中传递了一个键，而不是对象本身。这是因为您正在映射对象的键。此外，您正在将您的 formValues 状态初始化为一个包含对象的数组。但是在您的 handleChange 函数中，您将状态设置为一个对象。

我不确定您的其余代码的结构如何，但我假设您正在尝试创建一个用户可以提交新费用的表单。与其对表格和费用使用相同的状态，不如将它们分成两个独立的状态。像这样。

const initialValues = payment: '', purchase: '', date:'', location: '', price: ''
const [formValues, setFormValues] = useState(initialValues);
const [expenses, setExpenses] = useState([])

const onHandleChange = (e) => 
  const value = e.target.value;
  setFormValues(...formValues,
  [e.target.name]: value
  );


const onSubmit = () => 
  // Append new expense to the expenses array
  setExpenses(previousExpenses => [...previousExpenses, formValues]);
  // Reset Form
  setFormValues(initialValues);

您可以使用括号立即从 map 方法返回。

// map over the expenses array and create a component based on each object in the array
  const userRows = expenses.map((expenseObject) =>(
  <Expense formValues=expenseObject />
))

或者只使用 return 语句。

// map over the expenses array and create a component based on each object in the array
  const userRows = expenses.map((expenseObject) =>
  return (<Expense formValues=expenseObject />)
)

还要确保在您的 Expense 组件中解构道具以获取 formValues 道具，我认为这就是您正在做的事情。