Reactjs React钩子渲染[对象]
我是新手，不知道自己做错了什么。我正在尝试使用useEffect并在useState中保存列表。但我正在找回[目标] 我正在构建一个简单的天气应用程序，我设法将一个结果保存到useState，但现在我想让3个城市在页面负载上显示天气，而不取决于用户输入的内容。这是密码Reactjs React钩子渲染[对象],reactjs,Reactjs,我是新手，不知道自己做错了什么。我正在尝试使用useEffect并在useState中保存列表。但我正在找回[目标] 我正在构建一个简单的天气应用程序，我设法将一个结果保存到useState，但现在我想让3个城市在页面负载上显示天气，而不取决于用户输入的内容。这是密码 const [query, setQuery] = useState(''); const [weather, setWeather] = useState({}); const [weatherConst, setW
const [query, setQuery] = useState('');
const [weather, setWeather] = useState({});
const [weatherConst, setWeatherConst] = useState([]); <-- not working
useEffect(() => {
fetch(`${api.base}group?id=3413829,6618983,2759794&units=metric&APPID=${api.key}`)
.then(res => res.json())
.then(result => {
setWeatherConst(result)
console.log("new list" + result)})
}, []) <-- not working
function apiCall() {
fetch(`${api.base}weather?q=${query}&unit=metric&APPID=${api.key}`)
.then(res => res.json())
.then(result => {
setWeather(result)
setQuery('')
console.log(result)
})
}
下面是一个快速片段，演示了该序列 我们将初始状态设置为[]，正如您所做的那样 在第一次渲染时，我们检查state.length，因为我们的初始数组为空，所以它渲染加载 useEffect运行并等待1秒，然后调用SetState[…loadedState]，触发渲染。useEffect清理在此处运行并清除计时器 我们再次检查state.length，现在由于数组不再为空，我们呈现状态[0]。名称，状态[1]。名称，状态[2]。名称。对于已知索引或有限数量的索引，这是可以的，但通常需要使用state.map 常量{useState，useffect}=React const loadedState=[{name:'foo'}，{name:'bar'}，{name:'baz'}] 功能应用程序{ const[state，setState]=useState[] useEffect=>{ 常量计时器=设置超时=>{ 设置状态[…加载状态]； }, 1000; return=>clearTimeouttimer； },[] 回来 {state.length？ {state[0].name} {state[1].name} {state[2].name} ：正在加载。。。 } ; } ReactDOM.render，document.getElementById'root'；
下面是一个快速片段，演示了该序列 我们将初始状态设置为[]，正如您所做的那样 在第一次渲染时，我们检查state.length，因为我们的初始数组为空，所以它渲染加载 useEffect运行并等待1秒，然后调用SetState[…loadedState]，触发渲染。useEffect清理在此处运行并清除计时器 我们再次检查state.length，现在由于数组不再为空，我们呈现状态[0]。名称，状态[1]。名称，状态[2]。名称。对于已知索引或有限数量的索引，这是可以的，但通常需要使用state.map 常量{useState，useffect}=React const loadedState=[{name:'foo'}，{name:'bar'}，{name:'baz'}] 功能应用程序{ const[state，setState]=useState[] useEffect=>{ 常量计时器=设置超时=>{ 设置状态[…加载状态]； }, 1000; return=>clearTimeouttimer； },[] 回来 {state.length？ {state[0].name} {state[1].name} {state[2].name} ：正在加载。。。 } ; } ReactDOM.render，document.getElementById'root'；
如果您想要另一个解释示例： 我想用简单的话来解释。当我们使用由useState钩子创建的useEffect或setSmth时，我们需要理解这不是一个我们只调用的简单函数。这是一种在需要时调用的异步函数。 例如：
useEffect(() => {
axios
.get(
"https://api.oceandrivers.com:443/v1.0/getForecastPoints/cnarenal/language/en"
)
.then((res) => res.data.data)
.then((res) => {
setWeather(res);
console.log(weather);
})
.catch((e) => {
console.table(e);
});
}, []);
let weatherList = weather.map((el) => {
return <li key={el.name}> {el.name} </li>;
});
return (
<div className="App">
<ul>{weatherList}</ul>
</div>
);
对不起我的英语。如果我说错了，请告诉我，我将非常感激 如果您想要另一个解释示例： 我想用简单的话来解释。当我们使用由useState钩子创建的useEffect或setSmth时，我们需要理解这不是一个我们只调用的简单函数。这是一种在需要时调用的异步函数。 例如：
useEffect(() => {
axios
.get(
"https://api.oceandrivers.com:443/v1.0/getForecastPoints/cnarenal/language/en"
)
.then((res) => res.data.data)
.then((res) => {
setWeather(res);
console.log(weather);
})
.catch((e) => {
console.table(e);
});
}, []);
let weatherList = weather.map((el) => {
return <li key={el.name}> {el.name} </li>;
});
return (
<div className="App">
<ul>{weatherList}</ul>
</div>
);
对不起我的英语。如果我说错了，请告诉我，我将非常感激 响应的实际内容是什么样子的？刚刚上传了图片，所以您可以查看新列表+结果是字符串连接，它将隐式调用result.toString，它给出[object]。使用console.lognew list、result，或者如果您想制作更可读的字符串表单，请尝试使用JSON.stringifyresult、null、2。哇，谢谢，我很笨，我混合了很多技术，yikes@jonrsharpe这就是答案！你应该把它贴上去3响应的实际内容是什么样的？刚刚上传了图片，所以您可以查看新列表+结果是字符串连接，它将隐式调用result.toString，它给出[object]。请使用console.lognew list、result，或者如果您想制作更可读的字符串表单，请尝试使用例如JSON.st
ringifyresult，null，2.哇，谢谢，我很笨，我混合了很多技术，yikes@jonrsharpe这就是答案！你应该把它贴上去3.