带有redux的功能组件，搜索文本框

Question

我有一个react应用程序和搜索功能。但现在我尝试在应用程序中实现redux。

所以我不想再这样了：

//const [searchfield, stateSearchField] = useState('');

但如果我加载应用程序，我现在会收到以下错误：

ReferenceError: searchfield is not defined
(anonymous function)
E:/Mijn Documents/UDEMY/REACT/robofriends-master/src/containers/App.js:41
38 | 
39 | 
40 | const filteredRobots = robots.filter(robot => {
> 41 |   return robot.name.toLowerCase().includes(searchfield.toLowerCase());
| ^  42 | });
43 | return !robots.length ?
44 |   <h1>Loading</h1> :

index.js:

const store = createStore(searchRobots);
ReactDOM.render(<Provider store={store}>
<App  />
</Provider>, document.getElementById('root'));
registerServiceWorker();

这就是app.js:

const mapStateToProps = state => {
return {
searchField: state.searchfield
}
};
const mapDispatchToProps = dispatch => {
return {
onSearchChange: (event) => dispatch(setSearchField(event.target.value))
}
}
function App(props) {

const [robots, robotState] = useState([]);
//const [searchfield, stateSearchField] = useState('');

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => { robotState(users) });   
}, []);

const filteredRobots = robots.filter(robot => {
return robot.name.toLowerCase().includes(searchfield.toLowerCase());
});
return !robots.length ?
<h1>Loading</h1> :
(
<div className='tc'>
<h1 className='f1'>RoboFriends</h1>
<SearchBox searchChange={setSearchField} />
<Scroll>
<CardList robots={filteredRobots} />
</Scroll>
</div>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

reducer.js:

import { CHANGE_SEARCH_FIELD } from './constants.js';

const initialState = {
searchField: ''
}
export const searchRobots = (state = initialState, action = {}) => {
switch (action.type) {
case CHANGE_SEARCH_FIELD:
return Object.assign({}, state, { searchField: action.payload });
default:
return state;
}
}

actions.js

import {CHANGE_SEARCH_FIELD} from './constants'
export const setSearchField = (text)=> ({
type: CHANGE_SEARCH_FIELD,
payload: text
});

searchbox.js

const SearchBox = ({ searchfield, searchChange }) => {
return (
<div className='pa2'>
<input
className='pa3 ba b--green bg-lightest-blue'
type='search'
placeholder='search robots'
onChange={e =>searchChange(e.target.value)}
/>
</div>
);
}
export default SearchBox;

我的问题是：我必须改变什么才能使用redux？

谢谢

我试着这样做：

const filteredRobots = robots.filter(robot => {
return robot.name.toLowerCase().includes(props.searchField.toLowerCase());
});
return !robots.length ?
<h1>Loading</h1> :
(
<div className='tc'>
<h1 className='f1'>RoboFriends</h1>
<SearchBox searchChange={props.onSearchChange} />
<Scroll>
<CardList robots={filteredRobots} />
</Scroll>
</div>
);

但我会得到这个错误：

ypeError: Cannot read properties of undefined (reading 'toLowerCase')
(anonymous function)
E:/Mijn Documents/UDEMY/REACT/robofriends-master/src/containers/App.js:40
37 | 
38 | 
39 | const filteredRobots = robots.filter(robot => {
> 40 |   return robot.name.toLowerCase().includes(props.searchField.toLowerCase());
| ^  41 | });
42 | return !robots.length ?
43 |   <h1>Loading</h1> :

我也试过这个：

console.log(props.store);

但后来我变得不明确了。

Answer 1

如果您尝试以以下方式编辑应用程序，它应该工作：

function App(props) {
const [robots, robotState] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => { robotState(users) });   
}, []);
const filteredRobots = robots.filter(robot => {
return robot.name.toLowerCase().includes(props.searchField.toLowerCase());
});
return !robots.length ?
<h1>Loading</h1> :
(
<div className='tc'>
<h1 className='f1'>RoboFriends</h1>
<SearchBox searchChange={props.onSearchChange} />
<Scroll>
<CardList robots={filteredRobots} />
</Scroll>
</div>
);
}

您必须使用从redux传递到props中组件的状态道具。

另一个问题是mapStateToprops中有一个拼写错误，应该是这样的：

const mapStateToProps = state => {
return {
searchField: state.searchField
}
};