现在还需要https://github.com/zilverline/react-tap-event-plugin吗？或者它已经直接实现到 React 的源代码中，并且点击延迟消失了。

export class SearchBar extends React.Component {
  render() {
    return (
      <div>
        <input onChange={this.props.onSearchTermChange} />
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onSearchTermChange: () =>
      dispatch({
        type: "SEARCHTERMCHANGE",
        payLoad: {}
      })
  };
};

基本上，当输入更改时，我想调用“onSearchTermChange”操作并将输入值传递给减速器，但我不知道如何从操作 onSearchTermChange 访问输入值。

我有一个项目需要为我的 PWA (ReactJS) 创建一个动态 manifest.json 文件。

请看下面我的代码：

app.service.js:

        function getAppDetails() {
            const requestOptions = {
                method: 'GET',
                headers: authHeader()
            };
            // TODO create dynamic manifest.json file here
            return fetch(`${config.apiUrl}/api/apps`, requestOptions).then(handleResponse);
        }   

        function handleResponse(response) {
            return response.text().then(text => {
                const data = text && JSON.parse(text);
                if (!response.ok) {
                    if (response.status === 401) {
                        // auto logout if 401 response returned from api
                        logout();
                        location.reload(true);
                    } 
                    const error = (data && data.message) || response.statusText;
                    return Promise.reject(error);
                }

                return data;
            });
}

app.actions.js： …

我想在单击保存按钮时渲染一个小吃栏组件，方法是将 showSnackbar 状态设置为 true 并在主渲染方法中进行简单的条件测试。反应 101，没什么大不了的。此小吃店组件在 2 秒后自动隐藏。

问题是我希望此状态重置回 false 以便用户能够再次单击保存按钮并让小吃栏组件再次呈现，因为我希望他保持在同一个表单上。我尝试了许多技术，但都以失败告终。这是我正在使用的代码......也许我缺少一种微不足道的方法：

class MyForm extends Component {
  state = {
    showSnackbar: false
  };
..
  saveChanges = async () => {
    // this technique actually toggles the states in sequence successfully
    // but I guess since it's super fast, React is not able to render the
    // snackbar
    await this.renderSnackbar();
    await this.unrenderSnackbar();
  };

  renderSnackbar = async () => {
    console.log("render"); // This is being displayed in console
    await this.setState({ showSnackbar: true }); …

我正在使用 react 和 redux 开发一个应用程序。我使用api。

申请流程：

• 填表格，
• 点击发送按钮，
• 将数据从表单发送到 api，
• 转到食谱页面

第一个组成部分是您输入信息的表格（姓名、卡路里、饮食类型）。

    class FormPage extends Component {
      constructor(props) {
        super(props);

        this.handleFormSubmit = this.handleFormSubmit.bind(this);
        this.goToListOfMealPage = this.goToListOfMealPage.bind(this);
      }

      handleFormSubmit(data) {
        const name = data.name;
        const calories = data.caloreis;
        const diet = data.diet;
        const health = data.health;

        console.log(name)
        return loadData( name, calories, diet, health)()
          .then(({ error }) => {
            if (!error) {
              setTimeout(this.goToListOfMealPage, 1500);
            }

            return error;
          }
        );
      }

      goToListOfMealPage() {
        const { history } = this.props;
        history.push('/ListMeal');
      }

      render() { …

我正在制作一个 React-redux 组件以嵌入到 Laravel 刀片文件中。在反应端，

我正在使用带有 thunk 的 redux，当我尝试从 Laravel 路由获取没有 thunk 的数据时，它得到了正确的。

但是当我在动作创建者中使用 axios 请求异步获取数据时。它给出了：

'未捕获的错误：操作必须是普通对象。使用自定义中间件进行异步操作。

这是反应端的入口组件。

入口.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import reducer from '../store/reducers/reducer';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import thunk from "redux-thunk";


const store = createStore(reducer, applyMiddleware(thunk)
+window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
// console.log(getState());

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
    , document.getElementById('like_post'));

这是App.js 的主要组件

import React, { Component } …

我正在学习 redux 并且我已经提供了一个使用 store、action 和 reducer 的简单代码。我正在使用 store.subscribe() 来监听状态的变化并用它来更新我的本地状态。

下面是我在 index.js 中的全部代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';

var store = createStore(changeState);
var initialState = {
    qty: 0,
    price: 0
}

function changeState(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            var stateCopy1 = Object.assign({}, state);
            stateCopy1.qty = stateCopy1.qty + action.qty;
            stateCopy1.price = stateCopy1.price + action.price;
            return stateCopy1;
        default:
            return state;

    }
}

class Home extends React.Component {
    render() {
        return …

我在 this.state 中有一个对象数组，我正在尝试从对象数组中更新单个属性。

这是我的对象

 this.state = {
  persons: [
    { name: "name1", age: 1 },
    { name: "name2", age: 2 },
    { name: "name3", age: 3 }
  ],
  status: "Online"
};

我尝试更新人 [0].name

import React, { Component } from "react";     
class App extends Component {
      constructor() {
        super();
        this.state = {
          persons: [
            { name: "John", age: 24 },
            { name: "Ram", age: 44 },
            { name: "Keerthi", age: 23 }
          ],
          status: "Online"
        };
      }
      changeName() {
        console.log(this);
        this.setState({ …

如果 Redux 操作实际上并不对数据进行操作而只是返回一个有效负载，为什么它们被称为操作？

除了被分派之外，动作还有其他用途吗，为什么在调用时不分派动作？

这只是未来证明可与多个商店一起使用的应用程序的一种方式吗？

这也产生了对 mapDispatchToProps 的需求，它通常是完全样板代码，用于用调度调用包装动作

通常可以用这个函数来概括，它接受一个动作对象并返回一个 mapDispatchToProps 函数

// mapActionsToDispatchProps.js
const mapActionsToDispatchProps = actions => {
  return dispatch => (
    actions.mapEntries(action => (
      (...args) => dispatch(action(...args))
    )
  )
)
export default mapActionsToDispatchProps

Object.mapEntries示例。

编辑

我看到最后一个关于 mapDispachToProps 主要是样板的问题可以通过直接传递一个动作对象来避免，并且 connect 将为我映射它们。

在react-redux 的 hooks 文档中，我们被警告说useSelector“即使组件的 props 没有改变，也不会阻止组件由于其父级重新渲染而重新渲染”，不像connect

这对我来说是新闻。是否connect防止在正常子组件不会重新渲染的地方重新渲染？更具体地说，我问的是当父组件重新渲染而 store 和 props 保持不变时，以下三种场景的重新渲染行为的差异：

1. 子组件包含在connectHOC 中。
2. 行为同 1.，但注入状态被重构为useSelector.
3. 作为 2.，但是useSelector依赖于它的所有东西都被删除了。