如何将状态添加到api fetch（）

Question

嗨，我需要在API提取中添加一个状态，但是要努力查看为什么当状态为空字符串时它可以工作，但是如果状态中有字符串则不能工作，请查看示例

想法是用户在输入中输入新文本，该文本会更新搜索状态，然后更新提取网址，以便他们可以搜索数据库

示例工作代码（请注意，搜索状态为空）

export default class ThirdScreen extends React.Component {
  state = {
    search: '',
    image: ''
  }


  componentDidMount() {
    this.fetchsa();
  }

  fetchsa = () => {
    const {search} = this.state;

    fetch(`https://xxx/search?q=moon&media_type=image`)
    .then((response) => response.json())
    .then((result) => this.setState({
      image: result.collection.items[0].links[0].href
    }))

  }

示例不起作用的代码

export default class ThirdScreen extends React.Component {
  state = {
    search: 'moon', //Notice this is not empty and now causes an error
    image: ''
  }


  componentDidMount() {
    this.fetchsa();
  }

  fetchsa = () => {
    const {search} = this.state;

    fetch(`https://xxx/search?q='${search}'&media_type=image`)
    .then((response) => response.json())
    .then((result) => this.setState({
      image: result.collection.items[0].links[0].href
    }))

  }

Answer 1

问题是您的fetch URL中的单引号：

const search = 'moon';
fetch(`https://xxx/search?q='${search}'&media_type=image`)

与

不同

fetch(`https://xxx/search?q=moon&media_type=image`)

API请求通过'moon'，而不是moon，并且没有找到结果。

但是没关系：

fetch(`https://xxx/search?q=${search}&media_type=image`)

所以：

1. 在${search}前后加上单引号。
2. 未找到结果时处理空的items数组。

例如：

fetch(`https://xxx/search?q=${search}&media_type=image`)
    .then((response) => response.json())
    .then((result) => result.collection.items.length > 0 && this.setState({
        image: result.collection.items[0].links[0].href
    }))

Answer 2

尝试一下：

export default class ThirdScreen extends React.Component {
  state = {
    search: 'moon', //Notice this is not empty and now causes an error
    image: ''
  }


 componentDidMount() {
   this.fetchsa();
 }

 fetchsa = () => {
 const {search} = this.state;

 fetch(`https://xxx/search?q='${search}'&media_type=image`)
.then((response) => response.json())
.then((result) => this.setState({
  result.collection && result.collection.items[0] && result.collection.items[0].links[0] ?image: result.collection.items[0].links[0].href:null
}))

}