Question

我无法获取选择的值并使用它来更新书籍在服务器上的书架，这是书单的代码：

class BooksList extends Component {
render() {
const { books, onUpdate, shelf } = this.props

return(
  <ol className="books-grid">
    {books.map((book) => (
      <li key={book.id}>
       <div className="book">
         <div className="book-top">
           <div className="book-cover" style={{ width: 128, height: 192, backgroundImage: `url(${book.imageLinks.thumbnail})` }}></div>
           <div className="book-shelf-changer">
             <select onChange={onUpdate(book.id, value)} value={shelf}>
               <option value="none" disabled>Move to...</option>
               <option value="currentlyReading">Currently Reading</option>
               <option value="wantToRead">Want to Read</option>
               <option value="read">Read</option>
               <option value="none">None</option>
             </select>
           </div>
         </div>
         <div className="book-title">{book.title}</div>
         <div className="book-authors">{book.authors.join(', ')}</div>
       </div>
      </li>
    ))}
  </ol>
)

} }

以下是服务器调用：

const api = "https://reactnd-books-api.udacity.com"


// Generate a unique token for storing your bookshelf data on the backend server.
let token = localStorage.token
if (!token)
  token = localStorage.token = Math.random().toString(36).substr(-8)

const headers = {
  'Accept': 'application/json',
  'Authorization': token
}

export const get = (bookId) =>
  fetch(`${api}/books/${bookId}`, { headers })
    .then(res => res.json())
    .then(data => data.book)

export const getAll = () =>
  fetch(`${api}/books`, { headers })
    .then(res => res.json())
    .then(data => data.books)

export const update = (book, shelf) =>
  fetch(`${api}/books/${book.id}`, {
    method: 'PUT',
    headers: {
      ...headers,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ shelf })
  }).then(res => res.json())

export const search = (query, maxResults) =>
  fetch(`${api}/search`, {
    method: 'POST',
    headers: {
      ...headers,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query, maxResults })
  }).then(res => res.json())
    .then(data => data.books)

这是整个项目的回购：

https://github.com/Campos696/reactnd-project-myreads-starter

我已经尝试了很多东西，但是因为我是一个新手我没有取得多大进展，所以提前感谢！

Answer 1

在您的<select onChange={onUpdate(book.id, value)} value={shelf}>上，您实际上正在向onChange媒体资源提供onUpdate功能的结果。

将函数本身绑定为您需要的值。另一件事，你的value参数来自哪里？它没有在任何地方定义。我认为这是选择的价值。所以你需要先检索它。

class BooksList extends Component {

    // Retrieve the value from the select, and call onUpdate whith the value, if it exists
    onSelectChange(id, event) {
        const {
            onUpdate
        } = this.props
        const { 
            value = ''
        } = this.select || {};

        if(value) {
            onUpdate(id, value);
        }
    }

    render() {
        const {
            books,
        } = this.props;

        return (
            <ol className="books-grid">
                {books.map((book) => (
                    <li key={book.id}>
                        <div className="book">
                            <div className="book-top">
                                <div className="book-cover" style={{ width: 128, height: 192, backgroundImage: `url(${book.imageLinks.thumbnail})` }}></div>
                                <div className="book-shelf-changer">


                                    <select 
                                        // See bind method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
                                        onChange={this.onSelectChange.bind(this, book.id)}
                                        // Use refs to store references: https://reactjs.org/docs/refs-and-the-dom.html
                                        ref={(select) => {this.select = select;}}
                                    >

                                        {/* Prefer empty values */}
                                        <option value="" disabled>Move to...</option>
                                        <option value="currentlyReading">Currently Reading</option>
                                        <option value="wantToRead">Want to Read</option>
                                        <option value="read">Read</option>
                                        {/* Prefer empty values */}
                                        <option value="">None</option>
                                    </select>
                                </div>
                            </div>
                            <div className="book-title">{book.title}</div>
                            <div className="book-authors">{book.authors.join(', ')}</div>
                        </div>
                    </li>
                ))}
            </ol>
        );
    }
}

获取select选项的值以更新服务器

1 个答案: