javascript - 将API派生的值映射到React.js状态时出现问题

我是使用React / Axios的新手。

我正在尝试通过Axios将城市词典API中的数据存储到状态中的空数组中。

然后，我尝试通过render函数将每个定义的名称呈现给浏览器。

  constructor(props) {
    super(props);
    this.state = {
      definitions: [],
      errors: null
    };
  }

  componentDidMount() {
    this.getUrbDef();
  }

  getUrbDef() {
    axios({
      method: 'get',
      url: 'https://mashape-community-urban-dictionary.p.rapidapi.com/define',
      headers: {'host': 'mashape-community-urban-dictionary.p.rapidapi.com', 'X-RapidAPI-Key': 'keydata'},
      params: {'term': 'world'}
    })
    .then(function (response) {
      console.log(response);
    })
    .then(response =>
      response.data.list.map(definition => ({
        name: `${definition.definition}`,
        id: `${definition.defid}`,
      }))
    )
    .then(definitions => {
      console.log(definitions);
      this.setState({
        definitions,
        isLoading: false
      });
      })
    .catch(error => this.setState({ error, isLoading: false }));
  }

  // Renders to the browser
  render() {
    // Grabbing objects to use from state
    let definitions = this.state.definitions;

如前所述，这是我第一次以这种方式使用React.js，所以我有些困惑-任何帮助将不胜感激！

演示：https://codesandbox.io/s/stoic-neumann-28rhe

最佳答案

问题在于then处理程序未返回任何内容：

.then(function (response) {
  console.log(response);
})

说明：

调用then将返回一个Promise，该Promise将根据处理程序函数内部发生的事情而得到解决/拒绝。

在您的情况下，处理程序不返回任何内容（console.log(response)），因此then返回的promise将使用未定义的值进行解析，结果是：

.then(response =>
  response.data.list.map(definition => ({
    name: `${definition.definition}`,
    id: `${definition.defid}`,
  }))
)

接收未定义。

您可以采取以下措施来解决此问题：

1）在response处理函数中返回then：

.then(function (response) {
  console.log(response);
  return response;
})

2）从链中删除第一个then：

axios({
  method: 'get',
  url: 'https://mashape-community-urban-dictionary.p.rapidapi.com/define',
  headers: {'host': 'mashape-community-urban-dictionary.p.rapidapi.com', 'X-RapidAPI-Key': 'keydata'},
  params: {'term': 'world'}
})
.then(response =>
  response.data.list.map(definition => ({
    name: `${definition.definition}`,
    id: `${definition.defid}`,
  }))
)

then

关于javascript - 将API派生的值映射到React.js状态时出现问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58486510/