LoginSignup
@meiteinekos (酩酊猫)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

プロパティ '◯◯' は型 'string' に存在しません。

Q&A

TypeScriptReact

発生している問題・エラー

型定義の仕方が悪いのか、プロパティを受け取ってくれません。
どのようにして解決すれば良いでしょうか

app.tsx
const [taskList, setTaskList] = React.useState<{}[]>([]);
input.tsx
export const InputForm = ({taskList, setTaskList}: {taskList: {}[], setTaskList: React.Dispatch<React.SetStateAction<{}[]>>}) => {

  const [inputText, setInputText] = React.useState<string>("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    setTaskList([
      ...taskList,
    {
      id: taskList.length,
      text: inputText,
      completed: false
    }]);
  }
list.tsx
export const TodoList = ({taskList, setTaskList}: {taskList: string[], setTaskList: React.Dispatch<React.SetStateAction<string[]>>}) => {

    return (
        <div className="todoList">
        <div className="todos">
            {taskList.map((task, index) => (
                <span>{task.text}</span>　//←エラー
            ))}
        </div>
    </div>
    )
}

プロパティ 'text' は型 'string' に存在しません。
0 likes

2Answer

non_cal
@non_cal

おそらくtaskListにオブジェクトの配列を入れたいのだと思いますが、{}[]は空のオブジェクトの配列という型なので、空じゃないオブジェクトは入れられません。
（表題のエラーはtaskList: string[]と定義してるのにtask.textを読もうとしてるので出てます）

ということでオブジェクトの型を定義する必要があります。

type Task = {
  id: number;
  text: string;
  completed: boolean;
};

これをどこかで定義して、{}[]やstring[]となっている部分をTask[]に置き換えれば動きそうです。

以下、お節介です。

省略されてる部分もあるのでなんとも言えませんが子コンポーネントにsetTaskListとかを直接渡すのはあまり嬉しくないパターンです。
以下のように書けばちょっと単純にできます。

app.tsx
const [taskList, setTaskList] = React.useState<Task[]>([]);

const handleSubmit = (text: string) => {
  setTaskList([
    ...taskList,
    { text, id: taskList.length, completed: false }
  ]);
};

<InputForm onSubmit={handleSubmit}/>
input.tsx
export const InputForm = ({ onSubmit }: { onSubmit: (text: string) => void }) => {
  const [inputText, setInputText] = React.useState<string>("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    onSubmit(inputText);
  };

そらで書いてるので細かいところは間違ってるかもしれません。

1Like

Comments

  1. @meiteinekos

    Questioner

    とてもご丁寧に回答していただきありがとうございます!
    おかげさまで解決することができました！
shiracamus
@shiracamus
            {taskList.map((task, index) => (
                <span>{task.text}</span>　//←エラー
            ))}

taskList: string[] で taskList.map((task, index) の task は string型で、string型に .text プロパティなんてないですよ。
単に task でいいのでは？

簡易確認コード
> const taskList = ["a", "b", "c"];
undefined
> taskList.map((task, index) => `<span>${task}</span>`)
[ '<span>a</span>', '<span>b</span>', '<span>c</span>' ]
0Like

Your answer might help someone💌

LoginSign Up