react useEffect axiosを使ったデータ通信の条件分岐

Question

useEffectを使ってデータを取得しているのですが、データがあるときは大丈夫なんですが
データがない時にsetStateでrequestStateをEmptyにしたいです。
どう書いたらいいのでしょうか？

 useEffect(() => {
    const fetchData = async() => {
      const result = await Axios.get('/user/');
      const user: users[] =
      result.data.user.map((username: string) => ({ username }));
      setState({ ...state, ...{ users: user, requestState: Show};
    fetchData()
    .catch((e) => handleError('エラーが発生しました。'));
  }, []);

Answer 1

useState を使っているなら state を分けたらどうですか。

const [users, setUsers] = useState<User[]>([]);
const [requestState, setRequestState] = useState<Show | Empty>(empty);
const [other, setOther] = useState<Other>();

こう書けるので、

const result = /* リクエストする処理 */

setUsers(result.users);
setRequestState(result.users ? Show : Empty);
setOther(/* ... */)

このように spread 構文使って state を展開する必要がなくなくなります。
後は、何をもってデータが無いとするかは知りませんが result.users ? : の部分を好きに置き換えればよいです。

Answer 2

以下で可能かと思います。

setState({ ...state, ...{ users: user, requestState: user.length !== 0 ? Show : Empty};

もし1行が長くなるのが嫌であれば、user.length !== 0 ? Show : Empty を別の変数に入れてから、requestState に入れればいいと思います。

Comments

[cuku]

返信ありがとうございます！上記のようにかいたのですがaxiosでアクセスしててデータがない時は.catchに入ってしまいエラーが発生しましたとメッセージが出てしまいます。どうしたらいいでしょうか？

[nerianighthawk]

catch に入ってしまっているのですね。
catch の引数の e の内容を console.log 等で確認することは出来ますか？

[cuku]

consoloe.logで見てみたらTypeError: Cannot read property 'name' of nullとなっていて result.data.user.map((username: string) => のuserがnullだと言われていました

[nerianighthawk]

TypeError: Cannot read property 'name' of null なので、 user が null なわけではなく、name という値が null だと言われています。
このソースコードは完全ですか？name を使っている箇所が見当たりませんが、どこかで name を使っていませんか？