Question

因此，当我登录并尝试重定向到此页面时，我似乎出现了错误，它必须是我不知道的 useEffect 问题

这是我的代码

useEffect(() => {
    let canUpdate = true;
    getVets().then((result) => canUpdate && setVets(result));
    return function cleanup() {
        canUpdate = false;
    };
}, []);

const getVets = async () => {
    const url = 'http://localhost:8080/all/vet';
    const response = await fetch(url);
    const data = await response.json();
    setVets(data);
};

// const { appointmentType, animalID, room, hora, notes } = this.state;
return (
    <React.Fragment>
        <div class='title'>
            <h5>2 médicos vetenários disponíveis</h5>
        </div>
        <div>
            {vets.map((data) => (
                <ObterMedicos
                    key={data.name}
                    name={data.name}
                    specialty={data.specialty}
                />
            ))}
        </div>
    </React.Fragment>
);

}

Answer 1

vets 可能没有第一次渲染的数据，当代码尝试对其执行地图操作时，它会得到 undefined.map，这是不允许的。

您可以在定义状态时将 vets 设置为空数组

const [vets,setVets] = useState([]);

或者在使用地图功能之前使用 Optional chaning (?) 检查兽医：

{vets?.map((data) => (
                <ObterMedicos
                    key={data.name}
                    name={data.name}
                    specialty={data.specialty}
                />
            ))}

无法读取未定义 [React.js] 的属性“地图”

1 个答案: