React TypeError：无法读取未定义的属性“searchField”答案

【问题标题】：React TypeError: Cannot read property 'searchField' of undefinedReact TypeError：无法读取未定义的属性“searchField”
【发布时间】：2020-08-25 06:08:04
【问题描述】：

TypeError: Cannot read property 'searchField' of undefined
Function.mapStateToProps [as mapToProps]
C:/Users/windw/Desktop/robofriends/src/containers/App.js:11
   8 | 
   9 | const mapStateToProps = state => {
  10 |     return {
> 11 |         searchField: state.searchRobots.searchField
  12 |     }
  13 | }
  14 |

【问题讨论】：

对不起 searchField 而不是 toLowerCase
能否请您复制粘贴您的组件代码而不是图像？
state中没有searchRobots
github.com/ahmedabdo97/robofriends 这是项目的链接
github.com/ahmedabdo97/robofriends/blob/master/src/containers/…

标签： javascript reactjs

【解决方案1】：

使用这个搜索字段：state.searchField 代替搜索字段：state.searchRobots.searchField

您的讲师还将在视频的后面部分指导您删除 searchRobots。

【讨论】：

【解决方案2】：

很明显searchRobots 在 state/store 上不存在或为空。您能否检查以确保您指的是状态正确的属性 searchRobots？

【讨论】：

我添加了完整的项目和文件，因为我是新的，但仍然不明白你的意思
我在您的仓库中没有看到任何 REDUX 代码。我的意思是，该商店似乎没有 searchRobots 属性。

【解决方案3】：

我复制了您的代码并在此处附加了工作 sn-p。如图所示，您只需在<SearchBox /> 中进行更改。我不明白你为什么使用 redux。确保仅在需要时更新全局状态。

希望对您有所帮助！

const CardList = ({ robots }) => {
  return (
    <div>
      {robots.map((user, i) => {
        return (
          <div
            key={i}
            className="bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5"
          >
            <img
              src={`https://robohash.org/${user.id}?200x200`}
              alt="Robot Based On Char."
            />
            <div>
              <h2>{user.name}</h2>
              <p>{user.email}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
};

const SearchBox = ({ searchfield, searchChange }) => {
  return (
    <div>
      <input
        className="pa3 ba b--green bg-lighttest-blue"
        type="search"
        placeholder="search robots"
        onChange={e => searchChange(e)}
      />
    </div>
  );
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      robots: [],
      searchfield: ""
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(users => this.setState({ robots: users }));
  }

  onSearchChange = event => {
    this.setState({ searchfield: event.target.value });
  };

  render() {
    const { robots, searchfield } = this.state;
    const filteredRobots = robots.filter(robot => {
      return robot.name.toLowerCase().includes(searchfield.toLowerCase());
    });
    return (
      <div>
        <SearchBox searchChange={this.onSearchChange} />
        <CardList robots={filteredRobots} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.5.3/react-dom.min.js"></script>

【讨论】：

我在文件github.com/ahmedabdo97/robofriends/blob/master/src/containers/…中找不到任何redux代码，如错误所述。
是的，在他给我们的截图中，他添加了一些 redux 代码。不过我不明白他为什么这样做。
实际上我添加它是我学习如何使用它的课程的一部分，但老实说我仍然不明白为什么他把它放在那里
哈哈 :) 好的。在我给出的上述解决方案中，我们只是将函数绑定到 onclick 处理程序。

【解决方案4】：

对于那些学习了 aneagoie 课程但仍然遇到此问题的人，您可以做的最简单的 hack 是将 searchRobots 从减速器导入您的 App.js 并更改

searchField: state.searchRobots.searchField

到

searchField: searchRobots(state.searchField)

这对我来说完美而轻松。

【讨论】：

【解决方案5】：

您可能正在学习 udemy 的课程。有这个例子。因为我也做过。如果你没有，不用担心，这是相同的练习，我为你准备了调试程序。当您使用仅具有一个全局状态的 redux 时，使用 createStore，您不会将变量 searchRobots 添加到键 searchField，而是应该是 state.searchField，

【讨论】：