javascript - 将属性从React组件传递到Rails后端

我正在使用webpacker运行React和Rails 5.2。

我在页面顶部有一个ElasticSearch搜索栏，无法将适当的请求发送到后端，并且使rails后端无法处理搜索请求。

我们现在还没有准备好将其作为SPA，但是我似乎无法填充这些参数。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

import {asyncContainer, Typeahead} from 'react-bootstrap-typeahead';

const AsyncTypeahead = asyncContainer(Typeahead);

class SearchBar extends Component {


    constructor(props) {
        super(props)
        this.state = {
            options: ['Please Type Your Query'],
            searchPath: '/error_code/search',
            selected: [""],
        }

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    searchErrorCodes(term) {
        fetch(`/error_code/auto?query=${term}`)
            .then(resp => resp.json())
            .then(json => this.setState({options: json}))
    }


    handleChange(error_code_name) {
        let newValue = error_code_name

        this.setState({
            selected: newValue
        });

        this.setState({
            searchPath: `/error_code/search?error_code=${this.state.selected}`,
        });


        console.log(`This is the new searchPath is  ${this.state.searchPath}`);
    }

    handleSubmit(e) {
        alert(`submitted: ${this.state.selected}`);
        // event.preventDefault();
    }


    render() {

        return (
            <div>
                <form ref="form"
                      action={this.state.searchPath}
                      acceptCharset="UTF-8"
                      method="get"
                      onSubmit={e => this.handleSubmit(e)}
                >
                    <AsyncTypeahead
                        onSearch={term => this.searchErrorCodes(term)}
                        options={this.state.options}
                        className="search"
                        onClick={e => this.handleSubmit(e)}
                        selected={this.state.selected}
                        onChange={e => this.handleChange(e)}
                    />
                    <button
                        action={this.state.searchPath}
                        acceptCharset="UTF-8"
                        method="get"
                        type="submit"
                        className="btn btn-sm btn-search">
                        <i className="fa fa-search"></i>
                    </button>
                </form>
            </div>
        )
    }
}

ReactDOM.render(<SearchBar/>, document.querySelector('.search-bar'));

一切都可以正确渲染，但是输入没有正确发送到控制器。

最佳答案

setState本质上是异步的，短时间内多次调用setState可能会导致批量更新。表示最后一次更新获胜。您的第二个setState调用将覆盖第一个。


  将setState（）视为请求而不是立即更新组件的命令。为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不保证状态更改会立即应用。


考虑到您没有根据先前的状态或道具进行任何计算，您应该将setState调用更改为以下内容：

this.setState({
    selected: newValue,
    searchPath: `/error_code/search?error_code=${newValue}`
});

如果需要先前状态或道具来计算新状态，也可以将函数用作setState(updater, [callback])的updater。

this.setState((prevState, props) => {
  return {counter: prevState.counter + props.step};
});

  更新器功能接收到的prevState和props都保证是最新的。更新程序的输出与prevState浅层合并。


顺便说一句：请查看Why JSX props should not use arrow functions。内联使用它们是有害的。