组件内的组件无法获取值

Question

我有一个通过axios加载用户信息的组件：

const [isEditingFirstName, setIsEditingFirstName] = useState(false);
const [firstName, setFirstName] = useState('');
const [isEditingLastName, setIsEditingLastName] = useState(false);
const [lastName, setLastName] = useState('');

const [userInfo, setUserInfo] = useState(null);
const [favoriteTrainings, setFavoriteTrainings] = useState([]);
const [favoritePrograms, setFavoritePrograms] = useState([]);

const Axios2 = axios.create({
    baseURL: "http://localhost:4444/",
    withCredentials: true,
});

useEffect(() => {
    // Отримання даних про користувача
    Axios2.get('http://localhost:4444/userinfo')
        .then(response => {
            setUserInfo(response.data);
            setFavoriteTrainings(response.data.favoriteTrainings);
            setFavoritePrograms(response.data.favoritePrograms);
        })
        .catch(error => {
            console.error('There was an error!', error);
        });
}, []);

在返回方法中，有一些组件元素会立即更新其值。但是，我在此组件内创建了几个组件：

            <EditableText id="age" label="Age" placeholder="Age" type="number"
                          initialValue={userInfo ? userInfo.weight  : 'Loading...'} style={{flex: 1}}/>
            <EditableText id="weight" label="Weight" placeholder="Weight" type="number"
                          initialValue={userInfo ? userInfo.weight : 'Loading...'} style={{flex: 1}}/>
            <EditableText id="height" label="Height" placeholder="Height" type="number"
                          initialValue={userInfo ? userInfo.height : 'Loading...'} style={{flex: 1}}/>
            <EditableText id="callisthenics" label="Callisthenics" type="select"
                          options={['Beginner', 'Intermediate', 'Advanced']}
                          initialValue={userInfo ? userInfo.experience : 'EditableText'} style={{flex: 1}}/>

在它们内部，我传递了一些值，包括它们应该显示的值。因此，组件加载后，所有这些 EditableText 的值都是“Loading”，而页面上最初出现的 html 组件可以从 userInfo 中获取值。

Answer 1

在我看来，这个承诺没有任何回报。 参考这个问题：从Axios API返回数据