在另一个函数中调用一个函数并传递它的 id，react + redux

问题描述

在 React 本身，我有函数 getTodos()，它调用另一个函数getTodo().它将 res.data[0].id 传递给 getTodo() 函数.

In React itself, I have the function getTodos(), in which it calls another functiongetTodo(). It passes res.data[0].id to the getTodo() function.

反应

此处演示:https://stackblitz.com/edit/react-qvsjrz

代码如下:

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: [],
      todo: {}
    };
  }

  componentDidMount() {
    this.getTodos()
  }

  getTodos = () => {
    axios({
        url: 'https://jsonplaceholder.typicode.com/todos',
        method: 'GET'
    })
    .then(res => {
      this.setState({
        todos: res.data,
      }, () => this.getTodo(res.data[0].id))
    })  
    .catch(error => {
      console.log(error);
    });
  };

  getTodo = (todoId) => {
    axios({
      url: `https://jsonplaceholder.typicode.com/todos/${todoId}`,
      method: 'GET'
    })
    .then(res => {
      this.setState({
        todo: res.data
      })
    })
    .catch(error => {
      console.log(error);

    })
  }

  render() {
    console.log(this.state.todo);
    return (
      <div>

      </div>
    );
  }
}

);}}

The above code tries to convert to react + redux.

上面的代码尝试转换为react + redux.

React + redux

React + Redux

在操作中，我声明了两个函数getTodo 和getTodos.有人可以告诉我如何通过传递 getTodo id 函数来调用 getTodos 函数中的 getTodo 函数吗?

Demo here: https://stackblitz.com/edit/react-ewpquh?file=actions%2Findex.js

此处演示:https://stackblitz.com/edit/react-ewpquh?file=actions%2Findex.js

操作

Todos

待办事项

reducers

减速器

store

商店

推荐答案

不要让你的动作过于复杂，你应该为不同的 API 设置单独的动作类型.

1. GET_TODOS - For /todos API
2. GET_TO - For /todos/ API

1. GET_TODOS - 用于/todos API
2. GET_TO - 对于/todos/API

添加带有 ID 的 getTodo 方法，我是这样解决的 -

1. For each li tag, add an onClick that calls your getTodo API. (This is done as an example for the sake of adding getTodo in the workflow.

1. 对于每个 li 标记，添加一个调用您的 getTodo API 的 onClick.(这是为了在工作流中添加 getTodo 的示例.

1. 添加 handleClick，它从 props 调用 getTodo 方法.
   • 首先在你的组件mapDispatchToProps中添加getTodo:

Add handleClick -

• 添加handleClick -
1. 更新您的 getTodo 操作以将 ID 作为输入:

注意:添加的 GET_TODO 类型

export const getTodo = (id) => dispatch => {

  return axios({
      url: `https://jsonplaceholder.typicode.com/todos/${id}`,
      method: 'GET',
    })
    .then(({data})=> {
      // console.log(data);
      dispatch({type: GET_TODO, payload: data});   
    })
    .catch(error => {
      console.log(error);

      dispatch({type: FETCH_FAILURE})
    });
};

1. 将你的reducer 分成todos 和todo 并使用redux 包中的combineReducers -
1. Separate out your reducers into todos and todo and use combineReducers from redux package -

const todos = (state = [], action) => {
  const { type, payload } = action;

  switch(type) {
    case 'GET_TODOS':
      return payload;
    default:
      return state;
  }
}

const todo = (state = {}, action) => {
  const { type, payload } = action;

  switch(type) {
    case 'GET_TODO':
      return payload;
    default:
      return state;
  }
}

const rootReducer = combineReducers({todos, todo});

1. 运行应用程序并点击待办事项列表中的任何项目.获取该 ID 的 API 响应时，会显示所点击待办事项的控制台日志.

实时沙箱可在此处获得 - https://stackblitz.com/edit/react-ndkasm

The live sandbox is available here - https://stackblitz.com/edit/react-ndkasm

这篇关于在另一个函数中调用一个函数并传递它的 id，react + redux的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！