React 状态下的空数组

Question

我在 ruby-on-rails 上使用后端，当我的 API 调用 'transactions' 它 returns a JSON，通过 insomnia 测试时效果很好，但我的映射不起作用。这是我的反应页面：

interface Transaction {
  id: number;
  title: string;
  transaction_type: string;
  description: string;
  value: number;
}

const Index: React.FC = () => {
  const [transactions, setTransactions] = useState<Transaction[]>([]);

  useEffect(() => {
    api.get('transactions').then((response) => {
      setTransactions(response.data);
      // console.log(response.data, transactions)
    });
  }, []);

  return (
    <React.Fragment>
      <h1>Transactions</h1>
      {transactions.map((transaction) => {
        <div>{transaction.title}</div>;
      })}
    </React.Fragment>
  );
};

export default Index;

在后端，它只是 returns 一个 JSON 和我的数据库结果：

#transactions_controller.rb
def index
  render json: @transactions = Transaction.all
end

我的路由指向路径：'/api/'.

当 console.log 显示 response.data 时它是正确的，但当显示交易状态时它是空的。

Answer 1

您错过了地图中的 return。

{transactions.map(transaction => {
    return (<div>{transaction.title}</div>)
})}

或者您可以从映射中删除花括号 {，它会 return 隐含地。

{transactions.map(transaction => <div>{transaction.title}</div> )}

Answer 2

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.

https://reactjs.org/docs/react-component.html#setstate

这就是为什么您的 console.log 不起作用，正如之前的回答中所指出的，您在地图中缺少 return 这就是为什么您可能没有在屏幕上看到结果

Answer 3

那是因为ajax调用是异步的，所以当组件访问交易时，它仍然是一个空数组，最好的办法是检查之前是否加载过交易

使用下面的代码片段可以解决问题

interface Transaction {
  id: number;
  title: string;
  transaction_type: string;
  description: string;
  value: number;
}

const Index : React.FC = () => {
const [transactions, setTransactions] = useState<Transaction[]>([]);

useEffect(() => {
  api.get('transactions').then(response => {
    setTransactions(response.data);
    // console.log(response.data, transactions)
  });   
}, []);

return (
    <React.Fragment>
      <h1>Transactions</h1>
      {transactions.length && transactions.map(transaction =>
        <div>{transaction.title}</div>
      )}
    </React.Fragment>
  );
}

export default Index

注意：transactions.length 充当布尔标志，returns 如果为 0

则为 false

React 状态下的空数组

Empty array on React state

ruby-on-rails

reactjs

use-effect

use-state