Question

我正在尝试实现已处理项目的计数器，并且为此使用了React钩子。我的组件使用变量“ itemsProcessed”，该变量在操作中异步更新，并使用分派器推送到Redux存储。

result = await reader.read();

      itemsProcessed += 1;
      dispatch({
        type: ITEMS_PINGING,
        payload: itemsProcessed,
      });

然后在我的组件中，我正在使用mapStateToProps

    const mapStateToProps = state => ({
      itemsProcessed: state.itemsProcessed,
    });

和useEffect钩子使itemsProcessed更改时使组件重新呈现我的UI

    const [pItems, setItemsProcessedCount] = useState('');
.
.
.

    useEffect(() => {
    setItemsProcessedCount(props.itemsProcessed);
  }, [props]);

和类似的用户界面

<div className={Styles.list}>
    {props.someCondition < 1 ? (
      <div>
        {pItems}...  //if I do this way {props.itemsProcessed} the same result (only three dots, without number of items processed)
      </div>
    ) : (
      _itemsGrid()
    )}
  </div>

问题是为什么我只在屏幕上看到...，而不是：

1 ...

然后

2 ...

然后

3 ...

然后

4 ...

处理完所有项目后，我只看到所有项目的列表。当我尝试调试这种情况时，我会看到itemsProcessed的更改方式，甚至看到屏幕上的数字（例如2 ...），但这仅处于调试模式。当我关闭调试控制台并刷新页面时，我只会看到...，而在显示项目列表之前什么也没有。因此，React在更改后不会重新渲染我的pItem。

P.S。我的减速器看起来像这样：

const initialState = {
  itemsProcessed: 0,
};

const itemsPinging = (state, action) => {
  return Object.assign({}, state, {
    itemsProcessed: action.payload,
  });
};

export default (state = initialState, action) => {
  switch (action.type) {
    case constants.ITEMS_PINGING:
      return itemsPinging(state, action);
    default:
      return state;
  }
};

Answer 1

您的代码中有两个问题：

pItems不需要使用状态。如果pItems的值得到更新，则组件将重新渲染，您将获得新的值。
如果{pItems}是数组或对象，则无法执行pItems。执行{JSON.stringify(pItems}并看到它显示出来（仅出于测试目的）。

要呈现列表，您应该执行以下操作：

{ pItems.map(item => <div> item </div>) }

Answer 2

如果您在react应用中使用钩子，也请使用新的redux钩子

useDispatch挂钩 useSelector钩子

请参考redux新文档。这样可以提供更好的代码格式。

props更改时，React钩子不会重新渲染组件

2 个答案: