如何使用map方法使useState只影響陣列中的一項

我可以有一個這樣的陣列

const dayOfWeek = ["Sun", "Mon", "Tus", "Wed", "Thu", "Fri", "Sat"]

我有一個像這樣的芯片組件

const DateItem = (props: DateItemProps) => {
  const { days, selected, setSelected } = props

  return (
    <TouchableOpacity
      row
      center
      onPress={() => {
        setSelected(!selected)
      }}
      style={!selected ? CONTAINER_WITHOUT_SELECTED : CONTAINER_WITH_SELECTED}
    >
      <Text style={!selected ? TEXT_WITHOUT_SELECTED : TEXT_WITH_SELECTED}>{days}</Text>
      {selected && <Icon name="check" color="white" />}
    </TouchableOpacity>
  )
}

export default DateItem 

我使用 useState 鉤子來檢查是否選擇了專案

 const [selected, setSelected] = useState(false)

像這樣使用這個鉤子

<View row style={{ flexWrap: "wrap" }}>
            {dayOfWeek.map((item, index) => (
              <View>
                {console.log("index ", selected[index])}
                <DateItem days={item} selected={selected} setSelected={setSelected} />
              </View>
            ))}
          </View>

問題是每當我點擊一個專案時，所有專案都會同時檢查，那么我怎么能點擊一個專案，然后所有其他專案仍然沒有點擊？謝謝你

這是我點擊一項的時候

uj5u.com熱心網友回復：

你可以這樣做：

const [selected, setSelected] = useState()

在地圖功能中：

<DateItem days={item} selected={selected === item} setSelected={setSelected} />

在 setSelected 中：

// instead of !selected
setSelected(item)

如果您想選擇多個專案，請使用處于使用狀態的選定天數的陣列：

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

在地圖功能中：

<DateItem days={item} selected={selected.indexOf(item) !== -1} setSelected={setSelected} />

在 setSelected 中：

setSelected((previous) => {
  const temp = previous;
  // either add or remove the new item from temp with temp.push() and temp.slice()
  return temp;
})

uj5u.com熱心網友回復：

我認為這是因為您的selected狀態資料型別是布林值，因此它會影響dateItem您擁有的每個組件。也許將selected狀態更改為陣列或數字會更好。

這是一個示例，如果selected狀態資料型別為數字

選中狀態

   const [selected, setSelected] = useState(null)

父組件

<View row style={{ flexWrap: "wrap" }}>
            {dayOfWeek.map((item, index) => (
              <View>
                
                <DateItem days={item} index={index} selected={selected} setSelected={setSelected} />
              </View>
            ))}
          </View>

日期項組件

const DateItem = (props) => {
  const { days, selected, setSelected, index } = props

  return (
    <TouchableOpacity
      row
      center
      onPress={() => {
        setSelected(index)
      }}
      style={selected !== index ? CONTAINER_WITHOUT_SELECTED : CONTAINER_WITH_SELECTED}
    >
      <Text style={selected !== index ? TEXT_WITHOUT_SELECTED : TEXT_WITH_SELECTED}>{days}</Text>
      {selected === index && <Icon name="check" color="white" />}
    </TouchableOpacity>
  )
}

export default DateItem 

uj5u.com熱心網友回復：

您需要為每個按鈕設定單獨的狀態。

您的代碼現在的作業方式所有按鈕都處理相同的狀態，這就是為什么每當您單擊其中任何一個按鈕時，所有按鈕的狀態都會發生變化。

一種可能的解決方法是將您的狀態從單個布林值轉換為布林值物件，甚至是一個陣列。

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

甚至

const [selected, setSelected] = useState([monday: false, tuesday: false,wednesday: false, thursday: false, friday: false, saturday: false, sunday: false]) 

并且.map()您可以使用index來更改所需的值

uj5u.com熱心網友回復：

更新您的主要組件，如：

  const [selected, setSelected] = React.useState("")
  
  const dayOfWeek = ["Sun", "Mon", "Tus", "Wed", "Thu", "Fri", "Sat"]

  return (
    <View row style={{ flexWrap: "wrap" }}>
            {dayOfWeek.map((item, index) => (
              <View>
                {console.log("index ", selected[index])}
                <DateItem days={item} selected={selected} setSelected={setSelected} />
              </View>
            ))}
    </View>  
    );

和 DateTime.js 這樣的：

const DateItem = (props: DateItemProps) => {
  const { days, selected, setSelected } = props
  console.warn("selected: ", selected)
  console.warn("days: ", days)
  return (
    <TouchableOpacity
      row
      center
      onPress={() => {
        setSelected(days)
      }}
      style={!selected ? CONTAINER_WITHOUT_SELECTED : CONTAINER_WITH_SELECTED}
    >
      <Text style={!selected ? TEXT_WITHOUT_SELECTED : TEXT_WITH_SELECTED}>{days}</Text>
      {selected === days && <Icon name="check" color="white" />}
    </TouchableOpacity>
  )
}

希望這對你有用。

標籤：javascript 反应 反应原生

上一篇：我的應用程式需要一些我不需要的模塊！我的問題是什么？

下一篇：在reacttsx不起作用的情況下創建新行