时间戳

首页 > 解决方案 > rick & morty api 问题，请求带有 id 的字符

javascript - rick & morty api 问题，请求带有 id 的字符

问题描述

我想提出关于 api rick and morty 的请求。要获取角色的详细信息，您必须指定一个 id 作为参数：“ https://rickandmortyapi.com/api/character/id ”

我使用 redux-saga 来获取我的请求，但请求失败并显示一条消息： “嘿！不允许使用该参数，请尝试使用数字代替；）”

我用组件中收到的 id 尝试了请求，请求有效。我认为它要么来自我的行动，要么来自我的传奇......

这是我的行动： 

export const getCharactersDetails = () => {
  return { type: GET_CHARACTER_DETAILS }
}

这是我的传奇： 

const getLatestDetails = (id) => 
fetch('https://rickandmortyapi.com/api/character/' + id);


export function* fetchCharacterDetails() {
 try {

let myCharacter;
const response = yield call(getLatestDetails);
const result = yield response.json();

if (result.error) {
  yield put({ type: DETAILS_REQUEST_FAILED, error: result.error });
} else {
  myCharacters = result.results
  yield put({ type: DETAILS_RECEIVED, character: myCharacter });
}

} catch (error) {
  yield put({ type: DETAILS_REQUEST_FAILED, error: error.message });
}

}

function* actionWatcher() {
 yield takeLatest(GET_CHARACTERS, fetchCharacters)
 yield takeLatest(GET_CHARACTER_DETAILS, fetchCharacterDetails)
}

我这样称呼我的行动： 

let CharacterId = this.props.navigation.state.params.id
this.props.dispatch(getCharactersDetails(CharacterId))

知道我做错了什么吗？

标签： javascriptredux-saga

解决方案

您没有将任何 ID 传递给您的getLatestDetails函数。

将 ID 添加到您正在创建的操作中：

export const getCharactersDetails = id => {
  return { type: GET_CHARACTER_DETAILS, id }
}

…然后将操作中的 ID 作为参数添加到您的 saga 并将其作为第二个参数传递给您的call效果：

export function* fetchCharacterDetails({ id }) {
  try {
    let myCharacter;
      const response = yield call(getLatestDetails, id);
      const result = response.json();

      if (result.error) {
        yield put({ type: DETAILS_REQUEST_FAILED, error: result.error });
      } else {
        myCharacters = result.results
        yield put({ type: DETAILS_RECEIVED, character: myCharacter });
      }
    } catch (error) {
      yield put({ type: DETAILS_REQUEST_FAILED, error: error.message });
    }
}

补充说明：

  • 传奇将行动作为论据；我们在这里使用解构来获取 ID（注意花括号）
  • call接受要调用的函数作为第一个参数，然后是传递给函数的附加参数，这就是getLatestDetails获取 ID 的方式
  • yield我之前删除了response.json()，这只是一个普通的旧同步操作

推荐阅读