Question

我是React的新手，我正在使用Game Of Thrones的API。我试了又试，但是我不知道如何获取输入值并传递给API以获取响应的正确方法。

class DataComponent extends Component {
    constructor() {
        super()
        this.state = {
            loading: false,
            character: {}
        }
        this.handleChange = this.handleChange.bind(this)
    }

    componentDidMount() {
        this.setState({loading: true})
        fetch(`https://www.anapioficeandfire.com/api/characters/${name}`)
            .then(response => response.json())
            .then(data => {
                this.setState({
                    loading: false,
                    character: data,
                                    })
            })

    }

    render() {


        return (
            <form>
            <input 
                style={inputStyle}
                name="name"
                value={this.state.name}
                onChange={this.handleChange}
                placeholder="First Name"
               />
               <br />
            </form>
        )
    }
}

我希望获取输入值并传递给API并获取字符的响应

Answer 1

似乎您正在混淆一些概念。在componentDidMount中，如果您已经知道要传递的值，则可以调用API。挂载组件（插入树中）后立即调用它。因此，就您而言（至少在所描述的上下文中），您不需要。

您需要做两件事：
-删除您的componentDidMount方法
-实现this.handleChange来接收输入的name参数并调用API。一个示例可以是：

handleChange(event) {
  const name = event.target.value;
  fetch(`https://www.anapioficeandfire.com/api/characters/${name}`)
    .then(response => response.json())
    .then(data => {
      this.setState({
        loading: false,
        character: data,
        name: name
      })
    })
}

您可能必须在构造函数name代码中添加this.state=...。
注意：上面的代码未经测试，但应该为您提供一个实现的好主意。

如何将输入值用于GET API响应？

1 个答案: