javascript - 如何将搜索输入从类组件传递到单独的 api 组件

Question

**its a recipe app and i'm stuck on passing search input to the api.
 this are two separate components**

这是进行搜索的组件：

class Search extends Component {
  state = {
    search: ""
  };

  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

   handleSubmit = (e) => {
    e.preventDefault();
  }

  render() {

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="search"
            value={this.state.search}
            onChange={this.handleChange}
          />
          <button type="submit">
            Search
          </button>
        </form>
      </div>
    );
  }
}
export default Search;

我在状态搜索组件中尝试该值将传递给 api： 当前我正在获取状态是未定义的，并且在使用道具时相同

const key = "***";
const url = `https://www.food2fork.com/api/search?key=${key}&q=${this.state.search}&page=2`;

export const recipesData = () =>{
    const recipesData = fetch(url).then(res => res.json());
    return recipesData;

标签： javascriptreactjscomponents

Answer 1

将方法添加到您的类或将状态传递给receiptsData 函数；

export const recipesData = (search) =>{
    const url = `https://www.food2fork.com/api/search?key=${key}&q=${search}&page=2`;

    const recipesData = fetch(url).then(res => res.json());
    return recipesData;

或者

class Search extends Component {
  state = {
    search: ""
  };

  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

   handleSubmit = (e) => {
    e.preventDefault();
    const url = `https://www.food2fork.com/api/search?key=${key}&q=${this.state.search}&page=2`;
    fetch(url)
      .then(res => res.json())
      .then(res => {
        console.log(res);
})
  }

  render() {

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="search"
            value={this.state.search}
            onChange={this.handleChange}
          />
          <button type="submit">
            Search
          </button>
        </form>
      </div>
    );
  }
}
export default Search;