Question

我构建了一个简单的应用程序，该应用程序从电影API中提取数据。当用户在输入中键入内容时，应使用输入中的值更新状态URL。一切正常，直到单击按钮（调用“ hendleSubmit”方法），并且我看到我的错误消息“尝试获取资源时发生错误TypeError：NetworkError”。有人可以帮我解决这个问题吗？

This is link to my Codepen

class App extends React.Component{
  constructor(props){
    super(props);
    
     this.state = {
       data: [],
       url: ""
     } 
    }
  // Method to call APIs
   getApiResponse() {
     console.log(this.state.url);
    fetch(this.state.url)
            .then(result => result.json())
            .then(result => {
        const results = result["Search"];
             this.setState({
                    data: results
                })
       console.log("Data result: " + results);
            })
      .catch(error => {
        console.log('Something went wrong ' + error);
      })
   }
    componentDidMount(){ 
      console.log("The Form component has been mounted");
    }
  
  handleChange = (event) => {
    const {value} = event.target;
    event.preventDefault();
    this.setState({
      url: 'https://www.omdbapi.com/?apikey=thewdb&s=' + value
    })
  }   
  handleSubmit = () => {
    return this.getApiResponse();
    }

  render(){
    console.log("STATE URL: " + this.state.url);
    const { data } = this.state;

    return(
    <div className="container">
        <h3 className="text-center">Test Page</h3>
        <Table movieData={data}/>
        <Form handleChange={this.handleChange}
              handleSubmit={this.handleSubmit} />
    </div>
    )
  }
}

class Table extends React.Component{
  render(){
    const {movieData} = this.props;
    return(
    <table className="table table-dark table-hover">
      <TableHeader />
      <TableBody movieData={movieData} />  
    </table>  
    )
  }
}
class Form extends React.Component{
  render(){
    const { handleChange, handleSubmit } = this.props;
    return(
     
    <form action="" method="" className="form-inline">
    <input name="movieName" type="text" placeholder="Enter search" onChange={handleChange}/>
    <button type="submit" className="btn btn-outline-primary" onClick={handleSubmit}>search</button>
    </form>
   
    )
  }
}

const TableHeader = () => {
  return(
  <thead>
      <tr>
        <th>Title</th>
        <th>Year</th>
        <th>ID</th>
      </tr>
    </thead>
  )
}

const TableBody = (props) => {
  const rows = props.movieData.map((row, index) => {
    console.log(row);
    return(
      <tr key={index}>
        <td>{row.Title}</td>
        <td>{row.Year}</td>
        <td>{row.imdbID}</td>
      </tr>  
    )
  })
  
  return(
  <tbody>{rows}</tbody>
  )
}
ReactDOM.render(<App />, document.getElementById("root"));

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anton App</title>
   <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet">
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    </head>
<body>
  <div id="root"></div>
</body>

Answer 1

您需要阻止默认的onSubmit操作。您的问题是，发起请求后，默认的表单提交操作将运行并重新加载您的页面。

更改handleSubmit看起来像这样：

lsb

状态更改时我无法获得API响应

1 个答案: