多次渲染反应组件onClick答案

【问题标题】：Render react component multiple times onClick多次渲染反应组件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>
  )

【问题讨论】：

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

标签： javascript reactjs ecmascript-6

【解决方案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 道具，我认为这就是您正在做的事情。

【讨论】：