Question

我正在尝试使用food2fork API生成具有特定成分的菜肴列表。 ComponentDidMount（）未触发，因此未打印任何内容。目前，我的handleClick和handleChange方法几乎没有作用，因此已将其省略。我不确定自己做错了什么，因为我先获取数据，然后将配方的状态更改为结果计数值。下面是ComponentDidMount（）代码和我的render方法。如果有人可以帮助，那就太好了，谢谢！！

class User extends Component{
  constructor(props){
    super(props);
    this.state = {
      error: '',
      isLoaded: '',
      ingredientName: '',
      recipes: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  } 

  ComponentDidMount(){
    fetch("https://www.food2fork.com/api/search?key=0b23e639e2a708b56e4e8cb0f575dfbf&q=chicken&page=1")
    .then(res => {
      console.log(res.json());
      return res.json();
    })
    .then(
      (result) => {
        console.log(result);
        this.setState({
          isLoaded: true,
          recipes: result.count
        });
      }
    )
  }

  render() {
    return (
      <div>
        <p id="ingredientTitle">Enter Your Ingredients Below:</p>
        <input type="text" id="box" value={this.state.ingredientName} onChange={this.handleChange}/>
        <div className="formList">
            <form id="ingredientForm">
              <div className="Buttons">
                <button type="button" id="AddButton" >Add Ingredient</button>
                <button type="button" id="SubmitButton" onClick={this.handleClick}>Submit</button>
              </div>
            </form>
            <h1>{this.recipes}</h1>
          </div>
      </div>
    )
  }
}

Answer 1

更改

   ComponentDidMount()

收件人

  componentDidMount()

c应该小写。请记住，方法名称始终以小写字母开头

Answer 2

不是ComponentDidMount（）而不是其componentDidMount（）

async componentDidMount() {
    const response = await fetch("https://www.food2fork.com/api/search?key=0b23e639e2a708b56e4e8cb0f575dfbf&q=chicken&page=1");
    const json = await res.json();
    return json;
  }

ComponentDidMount（）不触发

2 个答案: