React:如何更新usestate中的数组

Question

我正在使用axios填充一个useState数组。

当页面第一次呈现时，数组更新。但是当我在编辑之后调用这个函数时，什么也没有发生。

const [recursos, setRecursos] = useState([]);
const getRecursos = () => {
Conexoes.Consultar(ma, password, "recurso").then(retorno => {
console.log(retorno.Valores);
setRecursos(retorno.Valores);
})
.catch(erro => {
console.log(erro);
alert("Erro Catch")
}
)
}

函数Conexoes.Consultar是一个承诺:

export const Consultar = (ma, password, tabela) => {
return new Promise((resolve, reject) => {
const chamada = {
ma: ma,
s: password,
Banco: vars.dbase,
Tabela: tabela,
Filtros:
{
id: "%%"
}
};
axios.post(vars.servidor + 'consultar/',
chamada
).then((response) => {
resolve(response.data);
}, (erro) => {
reject(error);
});
})
}

编辑后调用的函数:(调用getRecursos()，但列表没有发生任何变化)

const salvarEdicao = () => {
if (titleEditar == "Editar Recurso") {
Conexoes.Atualizar(ma, password, "recurso", { id: idEditar }, { nome: valorEditar, ativo: ativo }).then(retorno => {
getRecursos();
setMenuEditar(false);
}).catch(erro => {
console.log(erro);
alert("Erro Catch")
});
}
}

函数Atualizar是一个承诺:

export const Atualizar = (ma, password, tabela, Filtros, Valores) => {
return new Promise((resolve, reject) => {
const command = JSON.stringify({
ma: ma,
s: password,
Banco: vars.dbase,
Tabela: tabela,
Filtros: Filtros,
Valores: Valores
});
console.log(command);
axios.post(vars.servidor + 'atualizar/',
command, { headers: { "Content-Type": "application/json" } }
).then((response) => {
console.log(response.data);
resolve(response.data);
}, (erro) => {
reject(erro);
});
})
}

数组映射:

{
recursos.length > 0
? recursos.map((item, key) => {
return (
<tr key={key}>
<td><CheckBox title={item.nome} checked={Conexoes.Bool(item.ativo)}></CheckBox></td>
<td>
<Button title="Editar" onClick={e => {
setValorEditar(item.nome);
setAtivo(item.ativo);
setIdEditar(item.id);
setMenuEditar(true);
setTitleEditar("Editar Recurso");
}}
>
</Button>
</td>
</tr>
);
})
: <></>
}

Answer 1

首先，你写的任何代码都应该是英文的。

关于数组的更新，请尝试:

setRecursos([...recursos, retorno.Values])

，因为您可能会覆盖以前的值，而只存储来自最新响应的值。

Answer 2

你需要等待，直到你的承诺被解决

const getRecursos = async () => {
Conexoes.Consultar(ma, password, "recurso").then(retorno => {
console.log(retorno.Valores);
setRecursos(retorno.Valores);
})
.catch(erro => {
console.log(erro);
alert("Erro Catch")
}
)
}
// use the async function like this
const recursos = await getRecursos();

同样的故事salvarEdicao,Atualizar…请查看更多async/await