Как создать «поле» для класса ES6 (пример React)
Я использую реакцию с ES6 и хочу повторно использовать переменную на уровне класса. Я получаю сообщение об ошибке:
bundle.js:29225 Uncaught TypeError: Cannot read property 'tempUnits' of undefined
Мой код здесь
class WeatherList extends Component {
constructor(){
super();
this.tempUnits = 'C'; // <== initialise it here
}
renderWeather(cityData) {
console.info('tempunits', this.tempUnits); // <== blows up here
const name = cityData.city.name;
const temps = _.map(cityData.list.map(weather => weather.main.temp), (temp) => temp-273);
const pressures = cityData.list.map(weather => weather.main.pressure);
const humidities = cityData.list.map(weather => weather.main.humidity);
const { lon, lat } = cityData.city.coord;
return (
<tr key = {name}>
{/* <td><GoogleMap lon = {lon} lat = {lat} /></td> */}
{/* <== Use it here */}
<td><Chart data = {temps} color = "orange" units = "{this.tempUnits}" /></td>
<td><Chart data = {pressures} color = "green" units = "hPa" /></td>
<td><Chart data = {humidities} color = "black" units = "%" /></td>
</tr>
);
}
render() {
return (
<table className = "table table-hover">
<thead>
<tr>
<th>City</th>
{/* <== Reuse it here again */}
<th>Temperature ({this.tempUnits})</th>
<th>Pressure (hPa)</th>
<th>Humidity (%)</th>
</tr>
</thead>
<tbody>
{this.props.weather.map(this.renderWeather)}
</tbody>
</table>
);
}
}
Вопросов Я хочу повторно использовать переменную tempUnits в функциях класса. Как мне это сделать?
См. reactjs.org/docs/handling-events.html (особенно часть о bind и альтернативах ему).
Спасибо. В соответствии с приведенной выше ссылкой я бы выбрал привязку в конструкторе: «Обычно мы рекомендуем привязку в конструкторе или использование синтаксиса полей класса, чтобы избежать такого рода проблем с производительностью». где «такого рода проблемы» вызваны функциями жирной стрелки.
Ответы 2
Добавьте следующую строку. Он заменит функцию renderWeather новым экземпляром, который будет привязан к контексту уровня класса.
this.renderWeather = this.renderWeather.bind(this);
Полный код:
class WeatherList extends Component {
constructor(){
super();
this.tempUnits = 'C';
this.renderWeather = this.renderWeather.bind(this);
}
Вместо того, чтобы напрямую инициализировать переменную в методе конструктора, вы должны добавить ее в состояние компонента. Добавьте следующий фрагмент под методом конструктора;
state = {
"tempUnits": "C",
}
Вам нужно будет привязать функцию this.renderWeather к this, как this.renderWeather.bind(this)
После этого вы можете получить доступ к tempUnit как this.state.tempUnits.
Если вы хотите изменить tempUnits, используйте;
this.setState({ tempUnits: "F" });
this, очевидно, представляет собой undefined внутри renderWeather.
Мне нравится использовать состояние, а не способ, используемый в вопросе. Мне это кажется чище.
Но это не сработает, так как this - это undefined.
О, я совершенно пропустил это: | .. ты прав. Функция должна иметь доступ к контексту. Я отредактирую свой ответ. Спасибо :)
Вы можете привязать
renderWeatherкthisв конструкторе или вместо этого использовать стрелочную функцию в качестве свойства классаrenderWeather = (cityData) => { ... }.