Javascript 将属性从react组件传递到rails后端

我用webpacker运行React和Rails 5.2

我在页面顶部有一个ElasticSearch搜索栏，我无法将正确的请求发送到后端，也无法让rails后端处理搜索请求

我们现在还没有准备好把它作为温泉疗养地，但我似乎无法让params居住

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}`
});

如果您需要以前的状态或道具来计算新状态，您还可以使用函数作为更新程序

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

updater函数接收的prevState和Prop都保证是最新的。更新程序的输出与prevState浅层合并

---

旁白：请看一看。内联使用它们是非常有害的。

当您触发此.setState{searchPath:`/error\u code/search？error\u code=${this.state.selected}`，}；，它发送的是this.state.selected的旧值，而不是您刚才在上面设置的值？据我所知，它会被更新，但当您单击submit时，表单按钮或其他东西不会传递更新。而且它不会向后端发送任何数据。在你回答这个问题之后，我会添加到我的答案中。如何从onChange={e=>this.handlechange}中获取错误代码名称？在这种情况下，内联es6 arrow函数是无关的，并且还会导致性能问题和中断浅层比较。它以数组的形式出现，内部只有一个字符串。您现在使用的方式是将错误代码名称设置为事件，而不是输入值。尝试handleChange{let newValue=e.target.value；}