使用“useState”在循环中更改特定子项的状态答案

【问题标题】：change state for a specific children in a loop with "useState"使用“useState”在循环中更改特定子项的状态
【发布时间】：2021-11-10 12:45:00
【问题描述】：

我正在使用 React Native 和我有一个循环，其中显示了一些属性类型，

我只为它创建了一个状态，因为属性类型是从数据库中获取的。我想要做的是显示他们被选中。请告诉我实现它的方法。

     const [propBCol, setPropBCol] = useState('#EDEDEE');
     const [propTCol, setPropTCol] = useState('#000000');  
{propType.map((item, index) => {
                    return (                      
    <TouchableOpacity style={{
          backgroundColor: propBCol,
          ...ListingFilterStyles.filterAnyBtn,
          ...ListingFilterStyles.btnMale,
          }}
          onPress={() => proptypes(item)}>
       <Text style={{color: propTCol}}>{item.value}</Text>
   </TouchableOpacity>

    );
  })}

propTypes 函数：

const proptypes = item => {
   setPropBCol('red');
   setPropTCol('White')
}

在此处输入代码

如何更改所选项目的颜色，上面的代码都是正在更改的项目颜色

【问题讨论】：

标签： javascript reactjs typescript react-native react-hooks

【解决方案1】：

const [propBCol, setPropBCol] = useState('#EDEDEE');
const [propTCol, setPropTCol] = useState('#000000');

const [selected, setSelected] = useState([]);

{propType.map((item, index) => {
    return (                      
    <TouchableOpacity style={{
        backgroundColor: selected.includes(index) ? propBCol : item.propBCol,
        ...ListingFilterStyles.filterAnyBtn,
        ...ListingFilterStyles.btnMale,
        }}
        onPress={() => proptypes(index)}>
    <Text style={{color: selected.includes(index) ? propTCol : item.propTCol}}>{item.value}</Text>
    </TouchableOpacity>

    );
})}

const proptypes = (index) => {
    setSelected(prev => {
        return [
            ...prev,
            index
        ]
    })
}

【讨论】：

帮了大忙，谢谢
快速问题：如果我只想选择一个属性怎么办...我确实删除了 setSelceted 中的扩展运算符，但它删除了文本颜色
const proptypes = (index) => { setSelected(prev => [index]) } 但只有一个属性，不需要数组
const [selected, setSelected] = useState();选择 === 索引？ propBCol : item.propBCol; const proptypes = (index) => { setSelected(index) }

【解决方案2】：

您不应为收到的每个 propType 声明一个状态。你可以做的是，你可以在你正在获取的对象中添加一个键并将其保存在状态中。

按下后，您可以使用数组的简单索引值更改选中键的值。您必须在方法内部传递数据并编写方法如下

const propsTypes = (item, index) => {
 var propTypesVar = [...propTypes]
 propTypesVar[index].propBCol= <<Your desired color>>
 propTypesVar[index].propTCol= <<Your desired color>>
 setPropType(propTypesVar)
}

之后，propBCol 的值将在您的 propType 数组的对象内，并且您可以渲染任何内容以显示用户是否选择了该值，即

{propType.map((item, index) => {
  return (                      
    <TouchableOpacity 
      style={{
        backgroundColor: item.propBCol,
        ...ListingFilterStyles.filterAnyBtn,
        ...ListingFilterStyles.btnMale,
      }}
      onPress={() => proptypes(item)}>
       <Text style={{color: item.propTCol}}>{item.value}</Text>
    </TouchableOpacity>
  );
 })}

【讨论】：