React JS map函数

Question

我有以下代码，我正在尝试使用一个映射函数来简化它，可能是在数组上：const columns = ['Title', 'Author', 'Rating']

export const BookshelfListRow = (props) => {

  return (
    <tr className="table-row" >


      <td>
        <input onChange={(e) => { props.Update(e.target.value) }} placeholder={props.book.Title} />
      </td>

      <td>
        <input onChange={(e) => { props.Update(props.book.Title, e.target.value) }} placeholder={props.book.Author} />
      </td>
      
      <td>
        <input onChange={(e) => { props.Update(props.book.Title, props.book.Author, e.target.value) }} placeholder={props.book.Rating} />
      </td>


    </tr>
)}

请注意，这是简化的-在我的实际代码中，我有30列(意味着30个单独的输入，而不是3列)，这就是为什么我要寻找一种方法来简化它，因为它目前非常长-所以基本上上面发生的事情是占位符在数组[Title,Author,Rating]中迭代，同时在每个新行上，我们从数组(以props.book[item]的形式)向props.Update函数添加了一项。你知道我该如何使用map函数来实现这一点吗？

Answer 1

您可以使用map来简化它。棘手的一点是使用不同数量的参数调用Update，但这也可以使用另一个map来实现。

const columns = ['Title', 'Author', 'Rating'];

export const BookshelfListRow = (props) => {
  return (
    <tr className="table-row">
    {
      columns.map((column, i) => (
        <td>
          <input onChange={ e =>
                   props.Update(...[                                            // the parameters to Update consist of
                     ...columns.slice(0, i).map(column => props.book[column]),  // the column values from the start until the current column, map is used here to get the values for those columns
                     e.target.value                                             // and the input value
                   ])
                 }
                 placeholder={ props.book[column] } />
        </td>
      ))
    }
    </tr>
  )
}

另一种方法：

Update函数一团糟。如果它只接受被更改的列和值，那么它可以简单得多，因为如果只有一个被更改，它不需要将所有这些属性发送回服务器，如下所示(这使用computed property names)：

const Update = (column, value) =>                                         // takes the column that was changed and the value
  axios.put('http://localhost:4001/books/update', { [column]: value });   // update only that column

然后渲染也会简单得多，如下所示：

const columns = ['Title', 'Author', 'Rating'];

export const BookshelfListRow = (props) => {
  return (
    <tr className="table-row">
    {
      columns.map((column, i) => (
        <td>
          <input onChange={ e => props.Update(column, e.target.value) } placeholder={ props.book[column] } />
        </td>
      ))
    }
    </tr>
  )
}

Answer 2

​

const columns = ['Title', 'Author', 'Rating']

const update = (val, column) => {
  console.log(`${column}: ${val}`)
}

const BookshelfListRow = () => (<table><tbody><tr className="table-row">{
      columns.map((column, i) => {
        return (<td key={i}><input type="text" onChange = {e => update(e.target.value, column)} placeholder={column} /></td >)
      })
    }</tr></tbody></table>
  )


ReactDOM.render(
  <BookshelfListRow />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

Answer 3

如果您使用的是props.book的密钥，您可以尝试如下所示：

import React from "react";

const BookshelfListRow = props => {
  const args = [];
  return (
    <tr className="table-row">
      {Object.keys(props.book).map((key, idx) => {
        if(idx > 0) {
          args.unshift(key);
        }
        const argsCopy = [...args];
        return (
          <td>
            <input
              onChange={e => {
                props.Update(...argsCopy, e.target.value);
              }}
              placeholder={props.book[key]}
            />
          </td>
        );
      })}
    </tr>
  );
};

export default BookshelfListRow;

否则，您可以使用您建议的数组(const columns = ['Title', 'Author', 'Rating'])，并获取每个值并将其添加到每个map循环的副本中。