React JS - 語義 UI 中搜索組件的值是 object 引用，而不是值

Question

我試圖在 React JS 應用程序中改進我有些尷尬的搜索實現，以使用 Semantic UI 的搜索組件。

當前的搜索邏輯基於按鈕推送，它讀取輸入到相鄰文本框中的文本並根據該文本進行搜索。 這是該實現的基本原理：

  constructor(props) {

    super(props);
    const {cookies} = props;


    this.state = {

      word: '',
      newWord: '',
      licenses: [],
      licensePage: [],
      csrfToken: cookies.get('XSRF-TOKEN'), 
      isLoading: true,
      licensesPerPage: 7,
      activePage: 1,
      begin: 0,
      end: 7
    };

    this.remove = this.remove.bind(this);
    this.btnClick = this.btnClick.bind(this);

  }

...

   async searchFromString () {

     this.setState({isLoading: true});

     fetch(`api/license/search/${this.props.searchString}`, {
        credentials: 'include'})
        .then(response => response.json())
        .then(data => this.setState({
          licenses: data,
          isLoading: false,
          licensePage: data.slice(this.state.begin, this.state.end)

        }))
        .catch(() => this.props.history.push('/'));
    }

...

 render() {
    const {licensePage, activePage } = this.state;
    const {licenses, isLoading, licensesPerPage} = this.state;
    const totalPages = Math.ceil(licenses.length / licensesPerPage);

    if (isLoading) {
      return <p>Loading...</p>;
    }

      const licenseList = licensePage.map(license => {
      return<tr key={license.id}>
        <td style={{whiteSpace: 'nowrap'}}>{license.fullName}</td>
        <td style={{whiteSpace: 'nowrap'}}>{license.requester}</td>
        <td style={{whiteSpace: 'nowrap'}}>{license.tag}</td>
        <td style={{whiteSpace: 'nowrap'}}>{license.dateCreated.substring(0, 10)}</td>
        <td style={{whiteSpace: 'nowrap'}}>{license.expiration}</td>
        <td style={{whiteSpace: 'nowrap'}}>{license.systems}</td>
        <td>

        <ButtonGroup>
            <Button size="sm" color="primary" tag={Link} to={"/licenses/" + license.id}>Edit</Button>
            <Button size="sm" color="dark" onClick={() => this.download(license.url)}>Download</Button>
            <Button size="sm" color="danger" onClick={() => this.remove(license.id)}>Delete</Button>
        </ButtonGroup>

        </td>
      </tr>
    });

我添加了語義搜索組件，如下所示：

  async handleSearchChangeNew (value) {

         this.props.updateSearchString(value);
    
         //this.setState({isLoading: true});
    
         fetch(`api/license/search/${this.props.searchString}`, {
            credentials: 'include'})
            .then(response => response.json())
            .then(data => this.setState({
              licenses: data,
              isLoading: false,
              licensePage: data.slice(this.state.begin, this.state.end)
    
            }))
            .catch(() => this.props.history.push('/'));
        }

...

          <div>
            <Search
    //                 loading={loading}
    //                 onResultSelect={(e, data) =>
    //                    dispatch({ type: 'UPDATE_SELECTION', selection: data.result.title })
    //                 }
                     onSearchChange={this.handleSearchChangeNew}
    //                 resultRenderer={resultRenderer}
    //                 results={results}
    //                      value={value}
                />
    
               </div>

大多數屬性都被注釋掉了，因為它們的功能包含在搜索方法中。 我把它們留在那里供參考。

當它調用后端時會出現問題。 它不是從搜索組件中獲取輸入的值，而是使用 object 引用進行調用：

LicenseList.js:153 GET http://localhost:3000/api/license/search/[object%20Object] 400 (Bad Request)

為什么是 object 參考？ 搜索值存儲在 props 中，並以與當前搜索方法相同的方式引用。

Answer 1

有幾個人對我圍繞使用 forms 的相同問題發表的另一篇文章發表了評論。 基於該輸入，我通過替換和消除按鈕在某種程度上解決了這個問題。 我仍然無法使用 Semantic-UI 搜索組件，但能夠通過按 Enter 提交搜索絕對是一種改進。 這也意味着清除搜索會將搜索結果重置為默認值。