reactjs - 键应该是唯一的，以便组件在更新时保持其身份

Question

我有一个 React 组件，它呈现从 API 调用并设置为 setOfAllBooks 状态的项目列表。每当我搜索该项目时，setOfAllBooks 状态都会通过搜索术语进行过滤，并且结果将保存在 searchedBooks 状态中。 searchedBooks 的结果随后被传递到 Table 组件并呈现在列表中。此时它可以正常工作，但是当我搜索另一个项目时，它会聚集在表中。我想做的是，在搜索了先前的术语后，每当我搜索新项目时，我都希望清除表格组件中的列表项目，以便为已搜索的新项目让路。

import React, { Component } from 'react';
import './Home.css'
import axios from 'axios';
import Autosuggest from 'react-autosuggest';

var books = []

const getSuggestions = value => {
    const inputValue = value.trim().toLowerCase();
    const inputLength = inputValue.length;

    return inputLength === 0 ? [] : books.filter(book =>
        book.title.toLowerCase().slice(0, inputLength) === inputValue);
};

const getSuggestionValue = suggestion => suggestion.title;

const renderSuggestion = suggestion => (
    <div>
        {suggestion.title}
    </div>
);

const Table = ({ data }) => (
    <table class="table table-hover">
        <thead>
            <tr class="table-primary">
                <th scope="col">Title</th>
                <th scope="col">Author</th>
                <th scope="col">ISBN</th>
                <th scope="col">No. Of Copies</th>
            </tr>
        </thead>
        <tbody>
            {data.map(row => 
                <TableRow row={row} />
            )}

        </tbody>
    </table>
)

const TableRow = ({ row }) => (
    <tr class="table-light">
        <th scope="row" key={row.title}>{row.title}</th>
        <td key={row.author}>{row.author}</td>
        <td key={row.isbn}>{row.isbn}</td>
        <td key={row.isbn}>24</td>
    </tr>
)


class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {
            value: '',
            suggestions: [],
            setOfAllBooks: [],
            searchedBooks: []
        };

        this.searchBook = this.searchBook.bind(this);
    }

    componentDidMount(){
        axios.get('/api/book/viewAll')
            .then(res => {
                this.setState({ setOfAllBooks: res.data });
                books = this.state.setOfAllBooks;
                console.log(this.state.setOfAllBooks)
            })
    }


    onChange = (event, { newValue }) => {
        this.setState({
            value: newValue
        });
    };

    onSuggestionsFetchRequested = ({ value }) => {
        this.setState({
          suggestions: getSuggestions(value)
        });
      };

    onSuggestionsClearRequested = () => {
        this.setState({
            suggestions: []
        });
    }

    searchBook(event){
        event.preventDefault();

        this.setState({value: this.state.value});

        this.state.searchedBooks = this.state.setOfAllBooks.filter(book => book.title == this.state.value);
        this.setState({searchedBook: []})

        console.log(this.state.searchedBook);
    }

    render() {
        const { value, suggestions } = this.state;

        const inputProps = {
            placeholder: 'Enter the name of the book',
            value,
            onChange: this.onChange
        }
        return (
            <div class="form-group col-lg-4">
                <label for="exampleInputEmail1">Email address</label>
                    <Autosuggest
                        suggestions={suggestions}
                        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                        getSuggestionValue={getSuggestionValue}
                        renderSuggestion={renderSuggestion}
                        inputProps={inputProps}
                        id="searchFor"
                    />
                    <div className=" form-group">
                        <label htmlFor="searchFor">&nbsp;</label>
                        <button class="form-control btn btn-success" type="submit" onClick={this.searchBook}>Search</button>
                    </div>
                    <Table data={this.state.searchedBooks} />
            </div>
        )
    }
}

export default Home;

结果

错误

Answer 1

您需要添加key支持TableRow组件为<TableRow key={row.title} row={row} /> 。删除 key你现在所在的位置。

.... A good rule of thumb is that elements inside the map() call need keys.

... keys used within arrays should be unique among their siblings. . Doc.

所以，看起来title你用来做什么key仍然会抛出警告，因为它们不是唯一。如果您有ID row 中的属性对象使用它。添加key至TableRow将删除第一个警告，但其他警告仍然存在，直到 title所有数据中没有 uniq 值。