Javascript 基于阵列视图中的选定项渲染组件

我正在进行一个项目，需要提供一个数组中的项目列表，其中一个项目设置为默认值。如果用户单击另一项，则复选标记将从默认项移动到选定项

例如，如果我有数组

[默认值：“萨博”、“沃尔沃”、“宝马”]

。然后，如果我单击Volvo，它将采用默认属性。我已筛选出数组并将其更新为新选择的项。在视图组件渲染后，在视图组件上显示此内容时出现问题。我的过滤功能是

selectItem(val){
  var currentDefault = this.state.vehicleList.find(function(element, index) {
    return element.default == true;
  });

  var currentVehicle = this.state.vehicleList.indexOf(currentDefault);
  var selectedItem = this.state.vehicleList.indexOf(val);

  if (currentVehicle != selectedItem){
    this.state.vehicleList[currentVehicle].default = false;
    this.state.vehicleList[selectedItem].default = true;
    this.state.pickedVehicle = this.state.vehicleList[selectedItem];
  } else {
    console.log('same vehicle');
  }   
}

我是否要将项目置于状态以使其更改

我在下面添加渲染函数

_renderItem({item, key}) {

      const car = (<Icon name="car" size={16} color="grey" />)
      const bicycle = (<Icon name="bicycle" size={16} color="grey" />)
     color="black" />)
      const check = (<Icon name="check-square" size={30} color="green" />)



                        if (item.type == 'car'){
                            return (
                              <TouchableHighlight onPress={() => this.selectItem(item)} underlayColor={'transparent'}>
                                <LinearGradient key={key} style={{justifyContent: 'center', borderRadius: 30, width: 180, height: 120, alignSelf: 'center'}} colors={['#ff00ff', '#0066ff']}>
                                    {renderIf(item.default == true)(
                                            <Text key={key} style={{alignSelf: 'flex-end', backgroundColor: 'rgba(0,0,0,0)', marginRight: 5}}> 
                                              {check}
                                             </Text>
                                        )}
                                    <View style={{alignSelf: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 60/2, backgroundColor: 'white'}}>
                                        <Text style={{alignSelf: 'center'}}>
                                        {car} 
                                        </Text>
                                    </View>
                                    <Text style={{marginTop: 5, fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                      {item.make} {item.model} {item.year}
                                    </Text>
                                    <Text style={{fontWeight: 'bold', color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                     {item.licensePlate} 
                                    </Text>
                                </LinearGradient>
                              </TouchableHighlight>
                              )
                          }
                          if (item.type == 'bicycle') {
                            return (
                                <LinearGradient key={key} style={{justifyContent: 'center', borderRadius: 30, width: 180, height: 120, alignSelf: 'center'}} colors={['#99cc00', '#000099']}>
                                      {renderIf(item.default == true)(
                                            <Text key={key} style={{alignSelf: 'flex-end', backgroundColor: 'rgba(0,0,0,0)', marginRight: 5}}> 
                                              {check}
                                             </Text>
                                        )}
                                        <View style={{alignSelf: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 60/2, backgroundColor: 'white'}}>
                                            <Text style={{alignSelf: 'center'}}>
                                            {bicycle} 
                                            </Text>
                                        </View>
                                        <Text style={{marginTop: 5, fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                          {item.make} {item.model} {item.year}
                                        </Text>
                                        <Text style={{fontWeight: 'bold', color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                         {item.licensePlate} 
                                        </Text>
                                </LinearGradient>

                              )
                            }

\u renderItem（{item，key}）{
常数车=（）
常数自行车=（）
color=“黑色”/>）
常量检查=（）
如果（item.type=='car'）{
返回(
this.selectItem（item）}underlayColor={'transparent'}>
{renderIf（item.default==true）(
{check}
)}
{car}
{item.make}{item.model}{item.year}
{item.licensePlate}
)
}
如果（item.type==“bicycle”）{
返回(
{renderIf（item.default==true）(
{check}
)}
{自行车}
{item.make}{item.model}{item.year}
{item.licensePlate}
)
}

如何添加组件

{this.state.vehicleList[index].default  && (
                                            <Text key={key} style={{alignSelf: 'flex-end', backgroundColor: 'rgba(0,0,0,0)', marginRight: 5}}> 
                                              {check}
                                             </Text>
                                        )}

{this.state.vehicleList[index]。默认值&&(
{check}
)}

由于对何时在项目旁边显示复选图标有限制，因此可以在渲染时将该条件与图标一起添加。例如，您需要基于该条件显示图标组件，您应该这样添加它

{this.state.vehicleList[indexOfTheItem].default && (<Icon/>)}

{this.state.vehicleList[indexOfTheItem].default&&（）}

仅当.state.vehicleList[项目]。默认值为true时，才会呈现图标

---

当状态更改时，组件将再次渲染。在更新每个车辆的默认状态时，可以使用相应车辆的bool值作为其旁边的条件。

是的，渲染时需要使用这些车辆的默认状态。你能在渲染组件的地方共享代码吗？刚刚更新了@Chandiniok，但是我如何使图标从一个项目更改为另一个项目。item.default在首次渲染视图时运行一次。能否提供更多详细信息？请将this.state.vehicleList[indexOfTheItem]条件和图标放置在每个项目旁边，在任何时候，只有一个是默认的，并且将处于选定状态。因此，对于状态为true的任何项目，图标将仅显示在该项目旁边。如果我不清楚，请告诉我。好的，我添加了下面的代码，但我的复选标记没有移动@钱迪尼。再次感谢你。这一个真的让我很郁闷，我觉得我缺少了一些小东西。你确定你传递的是项目索引的正确值吗？而且无论何时单击任何项目，您都会更新所有项目的默认状态ryt？好的。您可以将条件放置在文本组件内，并像这样放置在图标旁边。{this.state.vehicleList[index].default&&check}