массив объектов не выбирается, когда я нажимаю кнопку выборки - PullRequest
0 голосов
/ 01 декабря 2018

я получил ошибку при запуске этого !!Он говорит, что не может прочитать свойство карты не определено.Я хочу запустить функцию извлечения при нажатии кнопки!и тогда объекты покажут .. но ничего не похоже на это .. идет ошибка

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            robots: []
        }
        this.fetchData = this.fetchData.bind(this);
    }

//fetch data function . linked with button shdfvjksvda kvahsdksa
    fetchData=()=> {
        fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => {  response.json() })
        .then((data) => {
            console.log(data);
           this.setState({ robots: data })
        }
        )
        ;

    }

    render() {
        return (

           <div>
            <button onClick={this.fetchData}>Fetch</button>
            <p>
                {this.state.robots.map(el => {
                    return <div key={el.id}>
                       <span>{el.email}</span>
                       <span>{el.name}</span>
                       <span>{el.id}</span>
                    </div>
                })}
            </p>
        </div>
        )
    }

}

havscjhuvsakdvasdu
export default App;

Ответы [ 2 ]

0 голосов
/ 01 декабря 2018

Как указал Ишвар, вы ничего не вернете со своего первого .then().Однако идеальное решение - просто опустить скобки {, чтобы оно автоматически возвращало значение.Это немного чище и более читабельно:

fetchData = () => {
    fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then((data) => {
            console.log(data);
            this.setState({ robots: data })
        });
}

Функции стрелок могут иметь либо "краткое тело", либо обычное "тело блока".

В кратком телеуказывается только выражение, которое становится неявным возвращаемым значением.В теле блока вы должны использовать явный оператор возврата.

См. Документацию для функций стрелок для получения дополнительной информации о том, как они работают.

0 голосов
/ 01 декабря 2018

Вы пропустили оператор возврата при цепочке обещаний.

fetchData=()=> {
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => {  return response.json() })
    .then((data) => {
        console.log(data);
       this.setState({ robots: data })
    }
    )
    ;

}
...