Javascript setState won'；t更新反应时钟

我目前正在React中构建一个简单的应用程序，我对它还比较陌生，所以我觉得我的解决方案是一个简单的应用程序，我只是还没有看到它的经验

基本上，该应用程序允许用户输入世界上任何城市的名称，输出会更新输入下面的React live clock组件。为此，我使用城市时区库获取用户所需城市的数据，moment.js将城市时间解析为所需时区，当然，React live clock向用户显示实际时间

在我的

loadTime

函数中，我检索了timezone属性，并将其传递到我的

moment（）.tz（）

方法中进行解析。在我将

state

传递到我的

setState（）

并将更新的状态打印到控制台后，它确实显示了正确的状态。例如，用户键入Tokyo并返回键/值

时区：“Asia/Tokyo”

我的问题是，将

this.state.timezone

传递到我的React live clock components

timezone

属性并单击“获取时间”按钮后，我的时钟实际上不会更新状态，而是保持用户浏览器的当前时间

我已经确定了我的

loadTime（）

函数的工作原理，因此我认为我的时钟组件没有正确连接以读取更新的

时区状态。如我在问题中所述，另一种可能性是我使用的
setState（）
不正确

我在这里忽略了什么，还是误用了
setState（）


从“时刻时区”导入时刻；
从“城市时区”导入城市时区；
从“react live Clock”导入时钟；
let moment=require（‘瞬间时区’）；
导出默认类搜索扩展组件{
状态={
用户位置：“”，
本地时间：“，
行：[]，
};
//方法
加载时间=（搜索项）=>{
const city=城市时区。查找权限（searchTerm）；
让state=this.state；
如果（city.length>0）{
常量时区=城市[0]。时区；
现在让我们=矩（）.tz（时区）.format（'h:mm:ss a'）；
state.localTime=now；
state.timezone=时区；
}否则{
state.userLocation=“”；
state.localTime=“”；
};
本.设置状态（状态）；
console.log（状态）；
};
handleChange=（e）=>{
让state=this.state；
状态[e.target.name]=e.target.value；
本.设置状态（状态）；
}
//创造
handleClick=（e）=>{
e、 预防默认值（）；
this.loadTime（this.state.userLocation）；
};
渲染（）{
让警报=（！this.state.localTime）？“请输入位置”：”；
返回(
抓紧时间。
{/*{alert}*/}
)
}
};``` 
由于react无法识别更改，因此您直接操作状态，请尝试以下代码

 //Methods


loadTime = (searchTerm) => {
    const city = cityTimezones.lookupViaCity(searchTerm);
    let state = {...this.state}; 
    if (city.length > 0) { 
      const timezone = city[0].timezone;    
      let now = moment().tz(timezone).format('h:mm:ss a');           
      state.localTime = now;         
      state.timezone = timezone;   
    } else {
      state.userLocation = "";
      state.localTime = "";
    };
    this.setState(state);  
    console.log(state);      
  };

handleChange = (e) => {
  let state = {...this.state};
  state[e.target.name] = e.target.value;
  this.setState(state);   
}

你直接改变了整个地方的状态。不要在反应中这样做，否则会导致问题。仅通过
this.setState
更新状态（或在功能组件中，仅使用关联的挂钩功能）。如果需要更新深度嵌套的值，请首先对状态进行深度克隆，对其进行变异，然后将状态设置为克隆的对象如果要更新状态-this.setState（{'statename'，value}）。。在您的例子中，this.setState（{userLocation:'xyz'}）我重构了我的代码，以便对我的状态所做的更改在
setState（）
中进行，如下所示：
loadTime=（searchTerm）=>{const city=cityTimezones.lookupViaCity（searchTerm）；let state=this.state；//访问本地状态const timezone=city[0]。时区；let now=moment（）.tz（timezone）.format（'h:mm:ss a'）；this.setState（{userLocation:state.userLocation，localTime:now，timezone:timezone，}）；console.log（state）；}
但是，这并没有解决我的问题，即React不更新UI。您两次抓取时间时区。同样，房祖名444是正确的，事实上你是直接变异状态。您的句柄更改可能看起来像
handleChange=（e）=>{this.setState（prevState=>（{…prevState[e.target.name]=e.target.value，}）}
我感谢大家的帮助。我已更改代码以反映
setState（）中的更新状态
但是，状态的更改不会显示在UI中。我的猜测是，要么我在时钟组件中使用了错误的属性，要么我需要在默认状态对象中初始化时区变量，而不是在我的
loadTime（）
函数中。
 //Methods


loadTime = (searchTerm) => {
    const city = cityTimezones.lookupViaCity(searchTerm);
    let state = {...this.state}; 
    if (city.length > 0) { 
      const timezone = city[0].timezone;    
      let now = moment().tz(timezone).format('h:mm:ss a');           
      state.localTime = now;         
      state.timezone = timezone;   
    } else {
      state.userLocation = "";
      state.localTime = "";
    };
    this.setState(state);  
    console.log(state);      
  };

handleChange = (e) => {
  let state = {...this.state};
  state[e.target.name] = e.target.value;
  this.setState(state);   
}