【发布时间】：2020-11-15 20:51:17
【问题描述】：
我正在构建一个影院列表项目。有一个区块，其中包含有关每部电影的信息，然后是其下方的电影时间。
我有 2 个下拉菜单 - 一个用于选择电影，一个用于选择日期。我正在使用三元运算符来渲染结果，但无法获得结果，因此如果电影在特定日期没有任何放映，则在选择该日期时隐藏有关电影的信息块。
我将只发布其中一部电影的示例。
这是获取列表信息的json文件-
[
{
"id": "film1",
"filmTitle": "Knives Out",
"paragraphText": "Lorem ipsum dolor sit amet",
"mon": ["12:00", "15:00", "19:00"],
"tue": ["13:10", "16:30", "19:00", "21:00"]
}
]
这是 js 文件的一部分，其中包含电影列表 -
constructor(props){
super(props);
this.state = {
filmListings: [],
selectedFilm: "allFilms",
selectedDate: "allDates"
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event){
const {name, value} = event.target
this.setState({
[name]: value
});
}
componentDidMount() {
const FilmListings = require("./components/booking/filmTimesData.json");
this.setState({ filmListings: FilmListings })
}
render() {
const filmsArray = require("./components/booking/filmTimesData.json");
const selectedFilm = this.state.selectedFilm
const selectedDate = this.state.selectedDate
return (
<form id="searchForm">
<div id="filmDateContainer">
<div className="searchOption">
<h2>Film:</h2>
<img src={FilmSearch} alt="film icon"/>
<select
name="selectedFilm"
value={this.state.selectedFilm}
onChange={this.handleChange}
className="dropdown"
>
<option value="allFilms">All Films</option>
<option value="film1">Knives Out</option>
<option value="film2">Judy and Punch</option>
<option value="film3">Harriet</option>
</select>
</div>
<h2 id="or">OR</h2>
<div className="searchOption">
<h2>Date:</h2>
<img src={DateSearch} alt="date icon"/>
<select
name="selectedDate"
value={this.state.selectedDate}
onChange={this.handleChange}
className="dropdown"
>
<option value="mon">Monday 2nd December</option>
<option value="tue">Tuesday 3rd December</option>
<option value="wed">Wednesday 4th December</option>
</select>
</div>
</div>
<div>
{(selectedFilm === "film1" || selectedFilm === "allFilms") ?
<FilmInfo filmTitle={filmsArray[0].filmTitle} paragraphText={filmsArray[0].paragraphText}/> : " "}
{(selectedDate === "mon" || selectedDate === "allDates")
&& (selectedFilm === "film1" || selectedFilm === "allFilms") ?
<Mon day={filmsArray[0]}/> : " "
}
{(selectedDate === "tue" || selectedDate === "allDates")
&& (selectedFilm === "film1" || selectedFilm === "allFilms") ?
<Tue day={filmsArray[0]}/> : " "
}
{(selectedDate === "wed" || selectedDate === "allDates")
&& (selectedFilm === "film1" || selectedFilm === "allFilms") ?
<Wed day={filmsArray[0]}/> : " "
}
</div>
</form>
);
}
}
在此示例中，星期三没有放映电影，那么当从下拉列表中选择星期三时，如何获取不放映影片的信息块？
【问题讨论】：
-
我有点难以理解你在这里想要做什么。例如，需要两次相同的数据文件，或者硬编码
film1和filmsArray[0]值，或者在一周中的每一天都有单独的组件。 似乎您想要做的是创建一个根据值selectedFilm和selectedDate过滤的电影列表，然后您可以映射到渲染多个电影项目，但是您的代码是编写的以这样一种方式，它只能呈现一个。 -
如果可能的话，你可以尝试做一个Minimal, Complete and Reproducible 的例子。我推荐使用 Codesandbox，但这当然取决于你的喜好。
-
是的，它不止一部电影。我只是在这个例子中使用了一部电影来尝试简化它。我尝试使用过滤器和地图，但遇到了更多问题，因为我基于 2 个下拉菜单
标签： javascript reactjs conditional-operator