在调用第一个函数并获取数据后调用第二个函数，react + redux

Question

在纯React中，我在getTodos函数中调用了clickActive函数，从服务器获取数据后

  getTodos = () => {
    const url = 'https://jsonplaceholder.typicode.com/todos';

    const params = {
      expand: 'createdBy, updatedBy'
    };

    axios({
      method: 'GET',
      url,
      params
    })
      .then(res => {
        this.setState({
          todos: res.data
        }, () => this.clickActive());
      })
      .catch(error => {
        console.log(error);
      });
  };


clickActive = () => {
  const activeTask = document.querySelector('.activeTask');

  activeTask.click();
  console.log('active')
};

如何在 React + Redux 中调用函数 clickActive？我在 actions 文件夹中创建 getTodos 操作。在 Todos 组件中，它通过单击 GET 按钮调用此函数 getTodos。获取数据后如何调用clickActive函数？我将 clickActive 函数放在 helpers 文件中。我应该将 clickActive 函数导入文件 actions/index.js 吗？

预期效果：点击按钮GET -> 调用函数getTodos -> 调用函数clickActive

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

动作

import axios from 'axios';

export const GET_TODOS = 'GET_TODOS';
export const FETCH_SUCCESS = 'FETCH_SUCCESS';
export const FETCH_FAILURE = 'FETCH_FAILURE';

export const getTodos = () => 
dispatch => {

  return axios({
      url: 'https://jsonplaceholder.typicode.com/todos',
      method: 'GET',
    })
    .then(({data})=> {
      console.log(data);

      dispatch({type: GET_TODOS, payload:{
        data 
      }});   
    })
    .catch(error => {
      console.log(error);

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

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

  return axios({
      url: 'https://jsonplaceholder.typicode.com/todos',
      method: 'GET',
    })
    .then(({data})=> {
      console.log(data);

      dispatch({type: GET_TODOS, payload:{
        data 
      }});   
    })
    .catch(error => {
      console.log(error);

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

待办事项

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {getTodos} from '../.././actions';
import { clickActive } from '../../helpers';

class Todos extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <>
        <button onClick={this.props.getTodos}>GET</button>
        <ul>
          {this.props.todos.map(todo => {
          return <li key={todo.id}>
                    {todo.title}
                </li>
          })}
        </ul>
        <div className="active">Active</div>
      </>
    );
  }
}

const mapStateToProps = state => {
  const { todos } = state;

  return {
    todos
  };
};

const mapDispatchToProps = dispatch => ({
  getTodos: () => dispatch(getTodos())
});

export default connect(mapStateToProps, mapDispatchToProps)(Todos);

帮手

export const clickActive = () => {
  const activeTask = document.querySelector('.active');

  activeTask.click();

  console.log('click div');
};

Answer 1

你的 clickActive 函数是一个将与创建的 DOM 交互的函数，因此它应该在渲染后在 componentDidUpdate 和 componentDidMount 中调用（如果你要使用钩子，则在 useEffect 钩子中）。

在 componentDidMount/componentDidUpdate 场景中，我建议在您的 Todos 组件中添加这些生命周期方法：

componentDidMount() {
    // call clickActive once after mount (but your todos are probably empty this time)
    clickActive();
}

componentDidUpdate(prevProps) {
    if (prevProps.todos !== this.props.todos) {
        // call clickActive every time when todos is changed
        // (i.e. it will be called when your asynchronous request change your redux state)
        clickActive();
    }
}

在调用第一个函数并获取数据后调用第二个函数，react + redux

Calling the second function after calling the first function and fetching the data, react + redux

javascript

reactjs

redux

redux-thunk