Javascript 更新React中对象数组的几个属性（onClick={change Celsium to fahrenheit on setState}）

更新： 我已经修改了我的问题，并修改了我的示例代码，使其尽可能简单和自解释

从openweathermap API中，我得到了一个对象的数组…非常类似于此：

    // Returned JSON already parsed ( I used "Axios" for the GET request)
    const obj = [
      {name: "Hong-Kong", main: {temp: 34, humidity: 33}}, 
      {{name: "Ontario", main: {temp: 14, humidity: 3}}, 
      {{name: "Poland", main: {temp: 54, humidity: 9}}
    ]

我的应用程序组件的外观如下：

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: obj
    }
  }
  render() {
    return (
       <div>
         <Card weatherData={this.state.data}/>
       </div>

    )
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
资料来源：obj
}
}
render（）{
返回(
)
}
}

在我的卡组件中，我正在使用.map渲染3张漂亮的卡，其中包含我作为道具（weatherData）从应用组件状态传递到我的卡组件的所有天气信息：

function Class(props) {
  const convertToFahrenheit = e => {
    e.preventDefault();
    // Grab every single celsius and do the math to fahrenheit
    // I would need some sort of dynamic variable on the {d.main.temp}
  }


    {props.weatherData.map(d => {
       return (
         <div>
           <p>{d.name}</p>
           <p>{d.main.temp}</p>
           <p>{d.main.humidity}</p>
           <button onClick={convertToFahrenheit}>to_fahrenheit</button>
           <button>to_celsius</button>
         </div>
       )
    })}
}

功能类（道具）{
const convertToFahrenheit=e=>{
e、 预防默认值（）；
//抓住每一个摄氏度，计算到华氏度
//我需要在{d.main.temp}上使用某种动态变量
}
{props.weatherData.map（d=>{
返回(
{d.name}

{d.main.temp}

{d.main.湿度}

华氏度
摄氏度
)
})}
}

基本上，当我点击华氏按钮时，我希望能够将卡片组件上的摄氏温度更改为华氏温度，反之亦然

我不知道我是否应该在应用程序组件上管理它，并尝试更新状态上的温度，或者在类功能组件中找到一种聪明的方法。我迷路了

---

请提供建议，帮助，我已经被困在这个问题上一周了…我应该使用Inmutable和Redux来解决这个问题吗

第一个无状态组件没有方法，您的

卡

组件应该是有状态的

class Card extends React.Component{

  convertToFahrenheit = e => {
    // Grab every single celsius and do the math to fahrenheit
    // I would need some sort of dynamic variable on the {d.main.temp}
  }

render() {
  const { weatherData } = this.props;
  return (
    <div>
    weatherData.map(d => {
      return (
        <div>
          <p>{d.name}</p>
          <p>{d.main.temp}</p>
          <p>{d.main.humidity}</p>
          <button onClick={this.convertToFahrenheit}>to_fahrenheit</button>
          <button>to_celsius</button>
        </div>
      )
    })
    </div>
  )
}
}

类卡扩展React.Component{
convertToFahrenheit=e=>{
//抓住每一个摄氏度，计算到华氏度
//我需要在{d.main.temp}上使用某种动态变量
}
render（）{
const{weatherData}=this.props；
返回(
weatherData.map（d=>{
返回(
{d.name}

{d.main.temp}

{d.main.湿度}

华氏度
摄氏度
)
})
)
}
}

App.js中的toCelcius方法在哪里使用？Hi@SakhiMansoor感谢您的关注。我将使用它，但我想让它首先与toFahrenheit一起工作，不用担心它注销了什么？我希望您会看到它是一个只有一个元素的数组。该元素恰好是一个整数数组。所以你无意中创建了一个二维数组，而实际上你只需要一个内部数组。行

console.log（celsiusData）

是我保存在我的App.js组件状态下的所有整数的数组。现在我想要的是将这些摄氏度数据更新回状态（这也是我不知道该怎么做的事情）。我想要的是使用我的toFahrenheit javascript函数导入一个整数数组，循环并返回数组中的华氏温度，然后将其导入到状态…@SakhiMansoor我重新表述了我的问题。