Reactjs 在API调用响应数据后，setState永远不会设置为useEffect

我试图在数据从API传入后立即更新状态。数据正在传入，我可以使用API请求正下方的console.log查看它。所有的数据都是正确的，但由于某些原因，setState从未在我的钩子中设置。即使在控制台显示数据之后，它也只返回空数组

const [experienceData, setExperienceData] = useState([]);

const { match = {} } = props;

    useEffect(() => {
        async function fetchData() {
            if (Object.keys(match.params).length > 0) {
                const response = await ApiService.getExperiences(match.params.experieneId);
                console.log(response)
                setExperienceData(response)
            }
        }
        fetchData();
    }, []);

我一定是做错了什么，但我不知道那是什么。希望这里的人也遇到同样的问题

更新：我只是在a类中更改了所有内容，并在另一个文件中复制了完全相同的代码，然后遇到了完全相同的问题。控制台使用数据进行更新，但紧跟在数据之后的行上的setState没有setState

async componentDidMount() {
        if (Object.keys(this.props.match.params).length > 0) {
            const response = await ApiService.getExperiences(this.props.match.params.experieneId);
            console.log(response[0])
            this.setState({ experienceData: response[0], occurrenceData: response[0].occurrences });
        }
    }

---

我看到您将依赖项数组留空。这会告诉React仅在组件首次渲染时运行此效果一次。如果您想让您的

useffect

尊重您的状态挂钩，请将

setExperienceData

放入依赖项数组中是否可以尝试将

[match.params]

作为useffect的第二个参数传递给您。

您必须以正确的方式使用setstate，问题在于setExperienceData

const [experienceData, setExperienceData] = useState([]);

const { match = {} } = props;

useEffect(() => {
  fetchData();
}, [props.match.params]);

const async fetchData = () => {
  if (Object.keys(match.params).length > 0) {
    const response = await ApiService.getExperiences(match.params.experieneId);
    console.log(response)
    setExperienceData([...response])
  }
}

const [experienceData, setExperienceData] = useState({response:""});

const { match = {} } = props;

useEffect(() => {
    async function fetchData() {
        if (Object.keys(props.match.params).length > 0) {
            const response = await ApiService.getExperiences(match.params.experieneId);
            console.log(response)
            setExperienceData(experienceData => ({ ...experienceData, response: response }));
        }
    }
    fetchData();
}, []);
return(<div>check {experienceData.response}</div>)

const[experienceData，setExperienceData]=useState（{响应：}）；
常量{match={}}=props；
useffect（（）=>{
异步函数fetchData（）{
if（Object.keys（props.match.params）.length>0）{
const response=wait ApiService.getExperiences（match.params.experienceId）；
console.log（响应）
setExperienceData（experienceData=>（{…experienceData，response:response}））；
}
}
fetchData（）；
}, []);
返回（检查{experienceData.response}）

能否提供

[props.match.params]

或

[props.match.params.experienceId]

作为

useffect

的第二个参数，而不是空数组？能否在设置响应之前先尝试转换为

json

。添加

let r=response.json（）；控制台日志（r）；setExperienceData（r）

。在挂钩中设置

r

的值。在

console.log（response）

之后添加这些行。这不是一个json错误，我已经能够使用类在整个应用程序的其余部分中使用。你可以通过代码共享你的代码吗？Sandboxi无法连接API，所以我不认为我可以向你显示我还没有。我只是尝试过，[setExperienceData]，但是没有改变。尝试添加

props.match.params

，就像nishkaush当时建议的那样。这也没有解决问题。你能提供一个更完整的代码版本吗？你需要

[match.params]

作为第二个参数来使用effect，否则它将不起作用。我担心这也不起作用。我仍然得到相同的控制台结果，许多空响应，只有if语句中的console.log在最后显示数据，然后什么也不显示，状态似乎没有改变。@MattBrody不必担心，只需在一些在线代码编辑器中发布您的问题。我们将对此进行调查：）