没有更新组件反应钩子上下文

Question

"AdicionaItem"函数没有重新加载组件"Items.tsx"的地图，为什么？

const { transacao } = useContext(TransacaoContext);
return (
   transacao.itens.map(({descricao}: TransacaoItens) => (<h1>{descricao}</h1>)
);

const [transacao, setTransacao] = useState<Transacao>(transacaoInicial);

function AdicionaItem(item: TransacaoItens) {
        let novosValores = transacao;
        novosValores.itens = [...novosValores.itens, item];
        setTransacao(novosValores);
    }

const { AdicionaItem } = useContext(TransacaoContext);

function Adiciona(){
   AdicionaItem({descricao: "Teste"});
};

Answer 1

你的 useState 钩子在你的功能组件之外。尝试将其移动到 AdicionaItem 内：

function AdicionaItem(item: TransacaoItens) {
        const [transacao, setTransacao] = useState<Transacao>(transacaoInicial);
        let novosValores = transacao;
        novosValores.itens = [...novosValores.itens, item];
        setTransacao(novosValores);
    }