Reactjs 无法更新组件的状态

我刚刚开始学习反应。 我有一个组件，它调用weather API并获取用户提供位置的数据，用户输入在userLoc下得到更新，但finalLoc的状态没有得到更新，每当我控制台记录它时，它就会显示未定义的

const Inputs = props => {

    const [userLocation, setUserLocation] = React.useState('')


    const [finalLocation, setFinalLocation] = React.useState('')

    function fetchLocation(e) {
        setUserLocation (e.target.value)
    }

    function fetchDetails(e) {
        e.preventDefault()

        let baseURL = '//api.openweathermap.org/data/2.5/weather?q='
        const API_KEY = '&API_KEY'
        let total = baseURL + userLocation + API_KEY
        console.log(userLocation) // Outputs the input value
        setFinalLocation(userLocation)
        console.log(finalLocation) // Comes as blank
        console.log(total);
   
    }
    return (
        <div className='inputs'>
            <p className="label">Enter the location to find the weather.</p>
            <input type="text" className='loc-input' autoFocus placeholder='Enter a location' name="" id="location" onChange={fetchLocation} value={loc.userLoc || ""} />
            <button onClick={fetchDetails}>Get Details</button>
            <Outputs loc={loc.finalLoc} results={loc.result} />
 
        </div>
    )
}

const Inputs=props=>{
常量[userLocation，setUserLocation]=React.useState（“”）
常量[finalLocation，setFinalLocation]=React.useState（“”）
函数获取位置（e）{
setUserLocation（例如target.value）
}
函数获取详细信息（e）{
e、 预防默认值（）
让baseURL='//api.openweathermap.org/data/2.5/weather？q='10〕
常量API_键='&API_键'
让total=baseURL+userLocation+API\u键
log（userLocation）//输出输入值
setFinalLocation（用户位置）
console.log（finalLocation）//为空
控制台日志（总计）；
}
返回(
输入位置以查找天气
获取详细信息
)
}

如果在使用useState时更新状态，则不会将其作为

setState（{state://data}）

const Inputs=props=>{
常量[finalLoc，setFinalLoc]=React.useState（“”）；
const[userLoc，setUserLoc]=React.useState（“”）；
const[data，setData]=React.useState（[]）；
函数获取位置（e）{
userLoc（例如target.value）
}
函数获取详细信息（e）{
让baseURL='//api.openweathermap.org/data/2.5/weather？q='10〕
让API_KEY='&appid=API_KEY'
让total=baseURL+loc.userLoc+API\u键
setFinalLoc（userLoc）
取数（总数）
.then（response=>response.json（））
。然后（数据=>{
setData（数据）
})
}
返回(
输入位置以查找天气
获取详细信息
)
}

您可以使用函数形式。函数将接收上一个值，并返回更新后的值。所以要更新状态，我们必须用更新的值复制以前的值，然后用更新的值设置状态

setLoc((loc) => ({ ...loc, finalLoc: loc.userLoc }));

当您获得结果数据时，保持前一状态的副本

---

setLoc（（loc）=>（{…loc，结果：data}））

我认为，

setLoc

的函数调用是重置整个状态并设置一个新状态。无论何时调用函数

setLoc

都可以尝试这个

setLoc（{…loc，finalLoc:loc.userLoc}）

这是否回答了您的问题@kunalpanchal我已经厌倦了这样做，但是finalLoc仍然是未定义的，而且如果我使用loc，它不会用finalLoc填充对象。为什么不尝试创建3个不同的对象，就像，

const[finalLoc，setFinalLoc]=React.useState（“”）
const[userLoc，setUserLoc]=React.useState（“”）
const[data，setData]=React.useState（[]）并使用它们来操作，而不是创建单个对象。例如，请查看我下面的代码片段。@kunalpanchal将尝试这种方法，出于好奇，仅仅定义一个状态不能实现吗？@Levi，下面是您的解释，既然这里有两个处理程序在工作，那么用户输入不是在一个单独的函数中更新吗？在这种情况下，您必须使用多个状态-具有多个状态的函数组件是很常见的。我在最初的问题中更新了代码，但当我记录它时，最终分配仍然是空的。您在安慰如果不是，则检查状态是否正在更新？！！当我阅读您的代码时，根据我的理解，您不需要额外的state
setFinalLocation
，它刚刚被添加，但从未被使用过，因此我认为您应该直接将
userLocation
用于您的代码。