Question

我有一个组件，用户点击按钮，转到另一个页面（localhost:3020 --> localhost:3020/python）。我想使用在App.js的输入框中输入的url向返回JSON对象的Python脚本发出ajax请求，然后将其存储到posts数组中。然后，我想在单击按钮时将post数组中的值传递给PythonComponent.js。当我输入网址＆amp;点击该链接，我的console.log语句显示在控制台中，但我看不到posts呈现的任何文字。

如果我在App.js的状态下创建一个虚拟变量，使用输入框中的文本更新状态，输入框文本将在localhost:3020/python上呈现。当我在进行ajax调用后尝试返回posts时，它无法正常工作。

我的问题是如何将posts从App.js传递到PythonComponent.js?

App.js

class App extends Component {
    constructor(props) {
    super(props);
    this.state = {
      posts=[]
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick () {
    const urlBox = document.getElementById("box").value;
    this.setState({
      sendText: urlBox,
    })

    $.ajax({
    type: "GET",
    data: { arg1: urlBox} ,
    url: "http://127.0.0.1:5000/hello/",
    }).done(function(res) {
      this.setState({posts:res
      });
      console.log(res.title, res.text)
    }.bind(this));
  }


  render() {
    return (
        <div className="App">
            <div>
            <p className = "input-title"> Enter a URL</p>
            <input placeholder = "placeholder text" id="box" ref="textBox" type="text"/>
            <button onClick={this.handleClick}>
               <Link to={{pathname:"/python", message: this.state.posts.title}}> cant use button have to use link text </Link>
            </button>
          </div>
        </div>
    );
  }
}

export default App;

index.js

 <BrowserRouter>
   <Switch>
     <Route path='/python' component={PythonComponent} />
      <Route path='/' component={App} />
   </Switch>
</BrowserRouter>

PythonComponent.js

class PythonComponent extends Component {
  render() {
    return (
      <div>
        <Link to={{pathname:"/"}}> home </Link>
        <h1> HI </h1>
        {this.props.location.message} 
      </div>
    );
  }
}
export default PythonComponent;

Answer 1

我注意到的第一件事是你错过了App组件的部分构造函数。也许只是一个复制/粘贴错误？

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts=[]
    };
    this.handleClick = this.handleClick.bind(this);
  }
  ...

其次，如果App只是为Ajax请求获取PythonComponent的数据，我会将该调用移到PythonComponent并让它处理请求并呈现循环责任。您可以将该请求放在componentDidMount lifecycle hook内。一旦请求结算并设置了状态，渲染函数将再次触发。

我建议将请求移动到PythonComponent的原因是，当用户单击Link组件时，它已经在 AJAX请求解析之前重定向了用户。因此，PythonComponent没有可用的数据。通过移动它，重定向发生，PythonComponent将挂载，获取所需的数据，然后在状态更新后重新呈现。

第三，当您使用Link时，要将状态传递给链接的组件，您将需要使用state道具。例如：

<Link to={{ pathname: '/python', state: { message: 'Hello!' } }}/>

有关详细信息，请参阅Link documentation。

希望这有帮助！

将状态从ajax从一个组件传递到另一个组件

1 个答案: