Redux:无法读取属性'；添加'；未定义的

我正在努力与Redux抗争，试图将

inputValue

发送到商店。当我尝试这样做时，我得到

无法读取未定义的属性“add”的错误

import React, { useState } from 'react';
import './SearchingBar.css'
import { connect } from 'react-redux'
import actions from '../../duck/actions'


  const SearchingBar = ({shareToggleClass, props}) => {

    const [toggleClass, setToggleClass] = useState(false);
    const [query, setQuery] = useState('');

    const search = event => {
        if(event.key === "Enter") {
            setToggleClass(true);
            shareToggleClass({toggleClass})
            props.add(query)
        }
    }
    return (
        <input type = "text"
          placeholder = "Search.."
          className = {toggleClass ? "Active" : "unActive"}
          onChange = {e => setQuery(e.target.value)}
          value = {query}
          onKeyPress = {search}
        />
    )
}

const mapStateToProps = state => ({
  inputValue: state.inputValue
})

const mapDispatchToProps = dispatch => ({
  addValue: inputValue => dispatch(actions.addValue(inputValue))
})

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

import React，{useState}来自“React”；
导入“./SearchingBar.css”
从“react redux”导入{connect}
从“../../duck/actions”导入操作
const SearchingBar=（{shareToggleClass，props}）=>{
const[toggleClass，setToggleClass]=useState（false）；
const[query，setQuery]=useState（“”）；
常量搜索=事件=>{
如果（event.key==“输入”）{
setToggleClass（真）；
shareToggleClass（{toggleClass}）
道具添加（查询）
}
}
返回(
setQuery（e.target.value）}
值={query}
onKeyPress={search}
/>
)
}
常量mapStateToProps=状态=>({
inputValue:state.inputValue
})
const mapDispatchToProps=调度=>({
addValue:inputValue=>dispatch（actions.addValue（inputValue））
})
导出默认连接（mapStateToProps、mapDispatchToProps）（搜索栏）；
非常确定您的组件参数解构是错误的

目前，您有：

const SearchingBar=（{shareToggleClass，props}）=>{

但是，如前所述，这假设此函数的唯一参数（我们通常称之为
props
）也有一个名为
props
的嵌套字段。这可能不正确

如果您试图仅提取
shareToggleClass
字段，然后作为名为
props
的对象访问所有剩余的props字段，则应使用“rest destructuring”：

//rest操作符获取所有剩余字段，并将它们放入新对象中
const SearchingBar=（{shareToggleClass，…props}）=>{

或者，您也可以专门对所需的任何剩余字段进行分解：

const SearchingBar=（{shareToggleClass，add}）=>{

另一个问题是您可能没有
props.add
功能，因为您的
mapDispatch
配置为创建名为
addValue
的道具：

const mapDispatchToProps=dispatch=>({
addValue:inputValue=>dispatch（actions.addValue（inputValue））
})

还得到了一些关于React Redux使用的建议

如果要使用
连接
，而不是将其作为函数编写：

const-mapspatch={
addValue:actions.addValue
}
连接（mapState、mapDispatch）（MyComponent）
//或者直接传递'actions'对象
连接（映射状态、操作）（MyComponent）

但是：

const SearchingBar=（）=>{
const inputValue=useSelector（state=>state.inputValue）；
const dispatch=usedpatch（）
const[toggleClass，setToggleClass]=useState（false）；
const[query，setQuery]=useState（“”）；
常量搜索=事件=>{
如果（event.key==“输入”）{
setToggleClass（真）；
shareToggleClass（{toggleClass}）
分派（添加值（查询））
}
}
返回(
setQuery（e.target.value）}
值={query}
onKeyPress={search}
/>
)
}