ReactJS: TypeError: Невозможно прочитать свойство 'name' из неопределенного

Question

Работа с ReactJS, Redux и Firestore Я получаю сообщение об ошибке при создании новой записи.Однако я не понимаю причину, поскольку я правильно получаю обновленную информацию в Redux, но после создания записи и возвращения для просмотра всех записей я получаю сообщение об ошибке:

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

Если я получаю доступ к визуализации записей, все в порядке, проблема заключается в том, что я создаю новую запись и возвращаюсь для визуализации всех.

Мой ответ jSON выглядит так:

1: 
data: {email: "mail@hotmail.com", lastName: "Asdasd", name: "Oscar"}
uid: "2ts2DopIoXoiMVJ6lMKi"

Когда я вернусь, чтобы получить все записи и сделать console.log (this.props.clients), верните это:

0:DocumentReference
firestore:
Firestore {_queue: AsyncQueue, INTERNAL: {…}, _config: FirestoreConfig, _databaseId: DatabaseId, _dataConverter: UserDataConverter, …}
id:(...)
parent:(...)
path:(...)
_firestoreClient:FirestoreClient {platform: BrowserPlatform, databaseInfo: DatabaseInfo, credentials: FirebaseCredentialsProvider, asyncQueue: AsyncQueue, clientId: "BGuRUAvN7ZQxmmNEZmbx", …}
_key:DocumentKey {path: ResourcePath}
__proto__:Object

Это мой код:

Действие: Получить данные из Firestore

export const getFromFirestore= () => async dispatch => {
    let res = [];
    await db.collection('users').get().then((snapShot) => {
         snapShot.docs.map( doc => {
             res.push({ uid: doc.id, data: doc.data()});
         })
    }, error => {
        console.log(error)
    });

    dispatch({
        type: GET_CLIENTS,
        payload:res
    });
}

Редуктор:

    case GET_CLIENTS:
    return{
        ...state,
        clientsFirestore: action.payload
    };

Клиентский компонент Показать данные изFirestore:

class Clients extends Component {

     componentDidMount(){
      this.props.getFromFirestore();
    };

    deleteClient = (id) => {
      this.props.deleteFirestore(id);
    }


  render() {
    const { clients } = this.props;
    return (
      <React.Fragment>
        <h1 className="display-4 mb-2">
          <span className="text-danger">Clients</span>
        </h1>
        <table className="highlight centered">
          <thead>
            <tr>
                <th>Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
          </thead>
          {clients && clients !== undefined ? clients.map((client, key) => (
              <Client
                key={key}
                id={client.uid}
                name={client.data.name}
                lastName={client.data.lastName}
                email={client.data.email }
                deleteClient={this.deleteClient}
              />  
          )): null }
        </table>
      </React.Fragment>
    );
  }
}

Clients.propTypes = {
  clients: PropTypes.array.isRequired,
}

const mapStateToProps = (state) => ({
  clients: state.clients.clientsFirestore
});

export default connect( mapStateToProps, { getFromFirestore, deleteFirestore } )(Clients);

Спасибо!

Answer 1

Решение:

export const addToFirestore = (client) => async dispatch => {
    let res ={ 
    id:'',
    data:{
        name:'',
        lastName:'',
        email:''
    }};

    await db.collection("users").add({ 
        name: client.name,
        lastName: client.lastName,
        email: client.email,
     })
    .then(function(docRef) {
        res.id = docRef.id;
        res.data.name = client.name;
        res.data.lastName = client.lastName;
        res.data.email = client.email;
    })
    .catch(function(error) {
        console.error("Error adding document: ", error);
    });

    dispatch({
        type: ADD_CLIENT,
        payload:res
    });
};

создайте объект, так как ответ FireStore приносит нам только ID: |

Answer 2

В функции Map может быть свойство data не определено, следовательно, свойство name для объекта данных throws TypeError: Cannot read property 'name' of undefined Убедитесь, что свойство data имеет свойство name, доступное перед передачей элементу <Client />.

<Client
    key={key}
    id={client.uid}
    name={typeof client.data.name !== 'undefined' && client.data.name}
    lastName={client.data.lastName}
    email={client.data.email }
    deleteClient={this.deleteClient}
/>

Answer 3

Перед возвратом добавьте запрос if, чтобы проверить, выбираются ли клиенты, тогда только функция карты сможет использовать внутренний объект клиента.Добавьте if (client === null) return <text>loading</text> или что-то еще, чтобы избежать ошибки извлечения, которая будет возвращать неопределенное значение для вложенного объекта.Изменить: в mapStateToProps определить клиентов как clients : this.state.clients

Answer 4

Вы также должны проверить, являются ли клиенты и клиенты неопределенными или нет, и только затем сделать карту, и если у вас действительно есть свойство с именем name

Проверьте ниже код

{clients && clients != undefined ? clients.map((client, key) => (
              {client && client != undefined && client.data && (<Client
                key={key}
                id={client.uid && client.uid }
                name={client.data.name && client.data.name}
                lastName={client.data.lastName && client.data.lastName}
                email={client.data.email && client.data.email }
                deleteClient={this.deleteClient}
              />)}  
          )): null }

PS: - Когда вы отправляете такие вопросы, попробуйте также опубликовать данные json, чтобы быстро найти разрешение