React子组件导致Ajax调用的父重新渲染

Question

我在Rails之上使用React与React Router来处理应用程序的前端，该应用程序应该返回有关用户搜索的任何gem的信息，但是，一旦我点击提交，子组件，谁管理它＆ ＃39;自己的状态，导致父组件的重新渲染。

预期结果：SavedGems.jsx重新渲染 实际结果：Search.jsx重新渲染

这是我的代码：

StaticPage.jsx

export default class StaticPage extends React.Component {

    render() {
        return (
                <BrowserRouter>
                    <div style={{display: 'flex', flexDirection: 'row'}}>
                        <Route exact path='/' render={() => <Search />}/>
                        <Route path='/favorites' render={() => <Favorites/>} />
                    </div>
                 </BrowserRouter>
        );
    }
}

Search.jsx

export default class Search extends React.Component {


    render() {

        return (
            <div style = {{display: 'flex', flexDirection: 'row'}}>
                <Sidebar/>
                <div style = {{display: 'flex', flexDirection: 'column'}}>
                    <Header name = "Search Gems"/>
                    <Form/>
                    <SavedGems/>
                </div>
            </div>
            )
        }
}

SavedGems.jsx

export default class SavedGems extends React.Component {
    constructor() {
      super();
      this.state = {saved_gems : []};

      console.log(this.saved_gems);
    }

    componentDidMount() {
        $.getJSON('/api/v1/saved_gems.json', (response) => { this.setState({ saved_gems: response }) });
    }


    render() {
        var saved_gems= this.state.saved_gems.map((saved_gem) => {
            return (
                <div key={saved_gem.id}>
                    <h3>{saved_gem.name}</h3>
                    <h3>{saved_gem.info}</h3>
                    <h3>{saved_gem.dependencies}</h3>
                </div>
            )
        });

        return (
            <div>
            {saved_gems}
            </div>
            )
        }
}

_form.jsx

export default class Form extends React.Component {
    constructor() {
        super();

        this._handleClick = this._handleClick.bind(this);
        this.state = {formBorderColor : "#5F5F5F"};
    }

    render() {
        return (
              <div>
                <form>
                  <label>
                    <input ref='name'
                            type="text"
                            placeholder='Search'
                    style= {{fontFamily: 'Lato-Regular',
                             fontSize: 18,
                             height:89,
                             width: 780,
                             paddingLeft: 20,
                             backgroundColor: 'white',
                             border: '1px solid',
                             borderColor: this.state.formBorderColor,
                             borderRadius: 100}}/>
                  </label>

                  <input type="image" src='/assets/magnifying-glass.png'
                         style={{marginLeft: -70}}
                         onClick={this._handleClick}/>
                </form>
              </div>
        )
    }

    _handleClick(event) {
        const name = this.refs.name.value;
        const info = '';
        const dependencies = '';



        $.ajax({
          url: '/api/v1/saved_gems',
          type: 'POST',
          data: { saved_gem: { name,  info, dependencies } },
          success: (saved_gem) => {

              this.props.handleSubmit(saved_gem);
              this.refs.name.value = '';
              this.refs.info.value = '';
              this.refs.dependencies.value = '';
          },
          error: (xhr) => {
            this.setState = ({formBorderColor : 'red'}).bind(this);
            alert("Sorry! That is not a valid gem");
          }
        })
    }
}