多次渲染反应组件 onClick

Question

您好，我正在开发一个费用跟踪器，老实说，我已经坚持了太久了。我试图多次渲染我的 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>
  )

Answer 1

正如 Diego 所说，您缺少来自 userRows 映射函数的 return 语句。当您将 formValue prop 传递到 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 方法 return。

// 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 道具，我认为这就是您正在做的。

多次渲染反应组件 onClick

Render react component multiple times onClick

javascript

ecmascript-6

reactjs