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

Question

我有2个功能，其中一个正在调用另一个。 内部调用的函数add正在检查this.state.selectedBookList中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;