從 Json 數據填充 React JS 下拉列表

Question

我有一些看起來像這樣的 json 數據：

{
    "author1": {
        "books": [{
                "title": "title1"
            },
            {
                "title": "title2"
            }
        ],
        "movies": [{
                "title": "movie1"
            },
            {
                "title": "movie2"
            }
        ]
    }
}

我想要一個包含作者（如 author1）的下拉列表。 選擇該下拉列表后，我想用該作者的鍵（書籍和電影）填充另一個下拉列表。

所以。 如果我的 json 位於名為 data 的變量中，我想用data.keys()填充第一個下拉列表，然后用data[author].keys()填充第二個下拉列表，其中 author 是在第一個下拉列表中選擇的值。

我見過很多使用 json 填充的示例，但沒有使用密鑰。 我對 React JS 很陌生，所以我不知道該怎么做。

謝謝

Answer 1

您可以使用以下流程。

const AuthorData = ({ symtomsData }) => {
  const [data] = useState({
    author1: {
      books: [
        {
          title: "title1"
        },
        {
          title: "title2"
        }
      ],
      movies: [
        {
          title: "movie1"
        },
        {
          title: "movie2"
        }
      ]
    },
    author2: {
      books: [
        {
          title: "titleasd"
        },
        {
          title: "titleqweqw"
        }
      ],
      movies: [
        {
          title: "movieqwewq"
        },
        {
          title: "movieqweqwe"
        }
      ]
    }
  });
  const [authorWroks, setAuthorWorks] = useState({});

  const [selectedData, setSelectedData] = useState([]);

  const onChangeAuthor = useCallback(
    (e) => {
      const authorSelected = e.target.value;
      if (authorSelected) {
        setAuthorWorks(data[authorSelected]);
      } else {
        setAuthorWorks([]);
      }
    },
    [data]
  );

  const changeItem = useCallback(
    (e) => {
      const itemSelected = e.target.value;
      console.log("itemSelected", itemSelected);
      if (itemSelected) {
        console.log("authorWroks", authorWroks[itemSelected]);
        setSelectedData(authorWroks[itemSelected]);
      } else {
        setSelectedData([]);
      }
      
    },
    [authorWroks]
  );

  return (
    <Grid>
      <Col>
        <select onChange={onChangeAuthor}>
          <option value="">select</option>
          {Object.keys(data).map((key, i) => (
            <option value={key}>{key}</option>
          ))}
        </select>
        <br />
        <div>
          {Object.keys(authorWroks).length ? (
            <select onChange={changeItem}>
              <option value="">select</option>
              {Object.keys(authorWroks || []).map((key, i) => (
                <option onChange={changeItem} value={key}>
                  {key}
                </option>
              ))}
            </select>
          ) : undefined}
        </div>
        <div>
          {selectedData.length ? (
            <select>
              <option value="">select</option>
              {(selectedData || []).map((data, i) => (
                <option onChange={changeItem} value={data.title}>
                  {data.title}
                </option>
              ))}
            </select>
          ) : undefined}
        </div>
      </Col>
    </Grid>
  );
};