Ошибка: TypeError: Невозможно прочитать свойство 'map' из неопределенного в React-Redux - PullRequest
Новая
       5

Ошибка: TypeError: Невозможно прочитать свойство 'map' из неопределенного в React-Redux

0 голосов
/ 15 марта 2020

Я делаю простую выборку с топором ios из https://jsonplaceholder.typicode.com/users, и я использую избыточность для хранения состояния приложения. Из загрузки URL я хочу получить все имена в выпадающем списке. Но выдает мне эту ошибку за 2 дня:

TypeError: Невозможно прочитать свойство 'map' из undefined.

Теперь я приведу ниже некоторые фрагменты кода, если у вас было видел раньше.

Вот действие, и я думаю, что оно в порядке. 

export const getAuthors = () => {
 return (dispatch) => {
axios.get('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
    dispatch({
      type: GET_AUTHORS,
      payload: response.data
    })
  })
  .catch(e => console.log(e))
 }}

Вот редуктор, и я думаю, что это ошибка: 

export default (state = initialState, action) => {
console.log("ACTION", action.payload);
switch (action.type) {
    case GET_AUTHORS:
        return {...state, authors: action.payload}
    default:
        return state;
}
}

Вот компонент функции, который показывает ошибку: 

const AddPostModal = ({authors, authorName}) => {
  return(
      <select
          value={authorName}
          onChange={handleChangeAuthor}
          {
             authors.map((author, index) => {
                return (
                   <option key={index}> {author.name} </option>
                )
             })
      </select>
  )
}
export default AddPostModal;

и ниже у нас есть компонент класса: 

import { getAuthors} from '../../actions/PostActions';
class Post extends React.Component{
    constructor(props) {
    super(props);
    this.state = {
      authorName: ''
    }
   }
   render() {
     return(
       <AddPostModal
         authors={this.props.author}
         authorName={this.state.authorName}
       />
     )
   }
  }
   const mapStateToProps = (state) => {
     return {
       authors: state.authorName.authors
     };
   }

   const mapDispatchToProps = (dispatch) => (bindActionCreators({
     getAuthors: getAuthors,
   }, dispatch))

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

Пожалуйста, если у кого-то есть решение, скажите мне, потому что вы будете спаси мой день Заранее большое спасибо.

Ответы [ 3 ]

0 голосов
/ 15 марта 2020

В вашем Post компоненте this.props.author может быть null или undefined в зависимости от ситуации. Поэтому я бы предпочел вызывать AddPostModal только тогда, когда this.props.author не null или undefined, потому что this.props.author требуется для AddPostModal

Вкл. Post компонент: 

const mapStateToProps = (state) => {
     return {
       authors: state.authorName.authors || []
     };
   }
0 голосов
/ 15 марта 2020

Сначала убедитесь, что ваш initialState.authors равен []. Во-вторых, убедитесь, что ваш state.authorsName в mapStateToProps правильно указывает на состояние вашего authorName редуктора. В противном случае, это должно быть похоже на authors: state.authors.

0 голосов
/ 15 марта 2020

API возвращает результат асинхронно, поэтому вы можете просто null проверить сначала authors. Технически .map() может вызываться только для массива, а null выдает эту ошибку, что вы видели в своем решении.

Попробуйте выполнить следующее: 

<select value={authorName}
        onChange={handleChangeAuthor}>
          {
             authors && authors.map((author, index) => {
                return <option key={index}> {author.name} </option>
          })
</select>

Надеюсь, это поможет !

...