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

Question

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 | 

Answer 1

Its evident that searchRobots does not exist on state/store or is empty. Can you check to ensure you are referring to correct property searchRobots in state?

Answer 2

use this searchField: state.searchField instead of searchField: state.searchRobots.searchField

And you instructor will also guide you to remove searchRobots in later part of video.

Answer 3

I made a copy of your code and have attached working snippet here. Only change you have to make is in the <SearchBox /> as shown. I don't see why you are using redux though. Make sure to update the global state only if needed.

Hope this is helpful!

 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>

Answer 4

For those following aneagoie course and still having this issue, the easiest hack you can do is to import searchRobots from reducers into your App.js and change

searchField: state.searchRobots.searchField

to

searchField: searchRobots(state.searchField)

This worked perfectly and easily for me.

Answer 5

you probably are doing a course from udemy. That has this example. Because I did it also. If you not, no worries, It´s the same exercise and I got the debugg for you. When you use redux with just one global state, using createStore, you don´t add the variable searchRobots to the key searchField, instead, It should be state.searchField,