Отображение объекта JSON, хранящегося в магазине Redux?

Question

Я хочу отобразить объект так, чтобы значения были доступны в моем JSX в каждом месте, где написано value.Объект сохраняется как const {weather} = this.props.Вот JSX:

render() {
const { weather } = this.props;

return (
  <div className='card border-secondary mb-3'>
    <div className='card-header text-white bg-secondary'>City Information</div>
    <div className='card-body'>
    Lat/Long:
    <div className="dropdown-divider"></div>
    <div className='row'>
    <div className='col-md-4 text-center'>
    <h5>Tempurature (F)</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    <div className='col-md-4 text-center'>
    <h5>Low (F)</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    <div className='col-md-4 text-center'>
    <h5>High (F)</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    </div>
    <div className='row'>
    <div className='col-md-4 text-center'>
    <h5>Pressure</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    <div className='col-md-4 text-center'>
    <h5>Humidity</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    <div className='col-md-4 text-center'>
    <h5>Wind Speed</h5>
    <h6 className ='text-info'>value</h6>
    <h5>Lat</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    <h5>Long</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    </div>
    </div>
    </div>
  </div>
);
}
}

Мой объект выглядит следующим образом:

{"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}

Как я могу использовать метод .map на моем объекте для рендеринга значений, которые я хочу отобразить?Большое спасибо.

Answer 1

Чтобы отобразить свойства объекта вместо обычного массива, вместо этого вы захотите использовать функцию Object.keys(this.props.weather).map(...).Это даст вам ключевые имена объекта погоды (то есть: координаты, ветер).Затем вы можете использовать это имя, чтобы получить свойство объекта погоды, например, так: this.props.weather[weatherPropertyKey].speed для клавиши «ветер», например.

Вот небольшая демонстрация:

class Weather extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      weather: {"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}
    };
  }

  render() {
    return (
      <div>
        {this.state.weather &&
          Object.keys(this.state.weather).map((weatherPropertyKey) => {
            return <div><b>{weatherPropertyKey}</b> = {JSON.stringify(this.state.weather[weatherPropertyKey])}</div>;
          })}
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Weather/>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

Я думаю, вы неправильно понимаете, что делает функция карты.Объекты JavaScript в основном представляют собой карту, то есть пары ключ-значение.Используйте mapStateToProps, чтобы отобразить объект, сохраненный в состоянии избыточности, в реквизит, который использует компонент, а затем просто получить к нему доступ, как и любой другой объект, т.е. this.props.stateObject.fieldValue