Question

我正在对正在使用的React应用程序进行现代化改造，并开始使用钩子。

在我拥有的组件之前是经典的类组件，包括构造函数，状态和所有内容。我通过以下方式将其挂接到redux：

import React from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';

import Logs from "NS/src/Screen/Logs"

import store from 'NS/src/Reducers/store'

const LogsStore = connect(state => ({ store: state.store }))(Logs);

现在，我正在关注有关Hooks的教程，因此我相应地更改了组件：

export default function Logs() {
  const {status, filteredStatus} = this.props.store
  const [filter, setFilter] = React.useState('')

  clearLogs = () => {
    ...
  }
  ...
}

问题在于现在this是不确定的。如何通过这种组件访问商店？

Answer 1

this是未定义的，因为功能组件没有实例，可以在props中使用redux道具，这是一个常规对象

const mapState = state => ({ foo : state.foo })

const Component = connect(mapState)(props =>{
    console.log(props.foo)
})

Answer 2

道具作为参数传递给您的功能组件：

public async Task<bool> Update_NAME_OF_THE_ARRAY(string id)
{
  var filter = Builders<History>.Filter.Eq("_id", ObjectId.Parse(id));
  var update = Builders<History>.Update.Combine(
    Builders<History>.Update.Set(x => x.NAME_OF_THE_ARRAY[-1].Name, "test")
    Builders<History>.Update.Set(x => x.NAME_OF_THE_ARRAY[-1].Flag, false);
  var result = await _historyCollection.UpdateOneAsync(filter, update);
  return result.ModifiedCount > 0;
}

...并且如果您要保存行：

export default function Logs(props) {
  const {status, filteredStatus} = props.store
  const [filter, setFilter] = React.useState('')

  clearLogs = () => {
    ...
  }
  ...
}

将功能组件连接到Redux存储

2 个答案: