从 Json 数据填充 React JS 下拉列表答案

【问题标题】：Filling React JS dropdowns from Json data从 Json 数据填充 React JS 下拉列表
【发布时间】：2021-06-19 01:49:10
【问题描述】：

我有一些看起来像这样的 json 数据：

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

我想要一个包含作者（如 author1）的下拉列表。选择该下拉列表后，我想用该作者（书籍和电影）的键填充另一个下拉列表。

所以。如果我的 json 在名为 data 的变量中，我想用data.keys() 填充第一个下拉列表，然后用data[author].keys() 填充第二个下拉列表，其中作者是在第一个下拉列表中选择的值。

我见过很多用 json 填充的例子，但没有用键填充。我对 React JS 很陌生，所以我不知道该怎么做。

谢谢

【问题讨论】：

我以最好的方式这么说。我想提出有益于社区的好问题。然而，当人们投票结束而没有对他们投票的原因发表评论时，将来很难写出更好的问题。我知道有些问题不是好问题，请发表评论以帮助请求者（而不仅仅是我）。谢谢

标签： javascript json reactjs

【解决方案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>
  );
};

【讨论】：