带 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>
    );

}

你必须在 props.

中使用从 redux 传递到你的组件的状态道具

另一个问题是你在mapStateToprops里面有错别字，应该是这样的：

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

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

functional components with redux, search textbox

javascript

reactjs

react-redux