Question

我有2个功能，其中一个正在调用另一个功能。内部调用的函数add正在检查this.state.selectedBookList中是否存在从输入字段中获取的bookName，如果不存在则将其添加bookName到this.state.selectedBookList，否则返回到调用者。但是我有一个问题，book.selectedBookName === bookName的结果总是错误的。那不可能，而我的arr最后总是空的。可以检查一下，什么地方不对吗？

import React, { Component } from 'react';
import EnteredBooks from '.././components/EnteredBooks/EnteredBooks';

class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            bookName: '',
            bookDescription: '',
            bookUrl: '',
            bookPrice: '',
            enteredBookList: [],
            selectedBookId: '',
            selectedBookName: '',
            selectedBookDescription: '',
            selectedBookUrl: '',
            selectedBookPrice: '',
            selectedBookList: [],
            activeIndex: '',
        }
    }

        submitHandler = (event) => {

            event.preventDefault();

            let bookId = Math.floor((Math.random() * 100) + 1);
            let bookName = this.state.bookName;
            let bookDescription = this.state.bookDescription;
            let bookUrl = this.state.bookUrl;
            let bookPrice = this.state.bookPrice;


            this.setState({
                enteredBookList: this.state.enteredBookList.concat({bookId, bookName, bookDescription, bookUrl, bookPrice})
            })
        }

     add = (bookName, bookUrl, bookDescription, bookPrice, index) => {
            let arr = this.state.selectedBookList;

            let found = arr.some(book => {
                return book.selectedBookName === bookName;
            });

            if (!found) { 
                return arr.concat({bookName, bookUrl, bookDescription, bookPrice, index}); 
            } 
             console.log(found);
        }

    selectedBookHandler = (bookName, bookUrl, bookDescription, bookPrice, index) => {
        let arr = this.add(bookName, bookUrl, bookDescription, bookPrice, index);

        this.setState({
            selectedBookName: bookName,
            selectedBookUrl: bookUrl,
            selectedBookDescription: bookDescription,
            selectedBookPrice: bookPrice,
            selectedBookId: index
        });
        console.log(this.state.selectedBookList);
    }

    render() {

        const enteredBooks = this.state.enteredBookList.map((enteredBook, index) => {
            const active = this.state.activeIndex;
            return <EnteredBooks
                key={index}
                enteredBook={enteredBook}
                active={index === active} 
                selected={this.selectedBookHandler.bind(this, enteredBook, enteredBook.bookName, enteredBook.bookUrl,
                    enteredBook.bookDescription, enteredBook.bookPrice, index)}
            />
        });

        return (
            <div className="App">
                <div className="add-product">
                   <form>
                        <div>
                            <label>Product name:</label>
                            <input 
                                type="text" 
                                placeholder="Book" 
                                value={this.state.BookName || ''}
                                onChange={event => this.setState({bookName: event.target.value})}
                            />
                        </div>

                        <div>
                            <label>Product description:</label>
                            <textarea 
                                placeholder="Sample description..."
                                value={this.state.bookDescription || ''}
                                onChange={event => this.setState({bookDescription: event.target.value})}
                            >
                            </textarea>
                        </div>

                        <div>
                            <label>Product image:</label>
                            <input 
                                type="text" 
                                placeholder="http://...jpg"
                                value={this.state.bookUrl || ''}
                                pattern="https?://.+" required
                                onChange={event => this.setState({bookUrl: event.target.value})}
                            />
                        </div>

                        <div>
                            <label>Product price:</label>
                            <input 
                                type="number" 
                                min="0" 
                                placeholder="20.5" 
                                value={this.state.bookPrice || ''}
                                onChange={event => this.setState({bookPrice: event.target.value})}
                            />
                        </div>

                        <button
                            type="submit"
                            onClick={event => this.submitHandler(event)}
                        >
                            Add a new Task
                        </button>
                    </form>
                 </div>

                 <div className="list-products">
                    <ul>
                       {enteredBooks}
                    </ul> 
                </div>
            </div>
        );
    }
}

export default App;

Answer 1

调用.some()函数时不使用谓词watch对数组的每个元素进行测试。

它需要使用谓词通过将watch更改为book来对每个元素进行测试，如下所示：

let found = arr.some(book => {
  return book.selectedBookName === bookName;
})

正如@Andreas在下面指出的那样，arr.concat函数不会更改state.selectedBookList数组的更改，而是返回一个新数组。从.add返回后，还必须将其设置为以下状态：

let arr = this.add(bookName, bookUrl, bookDescription, bookPrice, index);

this.setState({
   selectedBookList: arr,
   selectedBookName: bookName,
   selectedBookUrl: bookUrl,
   selectedBookDescription: bookDescription,
   selectedBookPrice: bookPrice,
   selectedBookId: index
});

let arr = this.state.selectedWatchList;也应该是this.state.selectedBookList吗？

Answer 2

添加书时找不到书，您是将其连接到上下文数组arr而不是selectedWatchlist。

return arr.concat({bookName, bookUrl, bookDescription, bookPrice, index});

应该是

return this.state.selectedWatchList.concat({bookName, bookUrl, bookDescription, bookPrice, index});

Answer 3

根据您的代码段：

this.state.selectedWatchList is not defined in this.state = {};

我认为您使用this.state.selectedWatchList而不是this.state。 selectedBookList

let arr = this.state.selectedWatchList;

调用的函数未在React中返回结果

3 个答案: