如何在 React 列表 onClick 中更改对象的状态？

Question

I have a List of Objects looking like this:

const List = [
  {
    title: " ",
    timestamp: 500,
    seen: false
  },

  {
    title: " ",
    timestamp: 600,
    seen: false
  },

The List ist displayed as a List auf Buttons with a title an an icon. When a Button is clicked, the object should be marked as "seen: true" and the icon should change the color. My problem: In my chase, the icon only changes the color when the component is rerendert, it should change when the button is clicked though. Can someone help?

const styles: Styles = {
  icon_unseen: {
    color: "#f97671",
  },
  icon_seen: {
    color: "#bdbdbd",
  }
};

export const  = () => {


  const sortedList = List.sort((a, b) => a.timestamp - b.timestamp);

  const onClick = (event: any) => {
     List.map((item) =>item.timestamp==event.currentTarget.id? item.seen=!item.seen : "")
      };

return (
 <Box>
      <PopperUnstyled>
        <StyledPopperDiv>
          {sortedNList.map((element) => (
            <ListItemButton id={element.timestamp} 
                            onClick={onClick} 
                            sx={{borderRadius: 2}}>
            <ListItem>
            <ListItemText
                  primary={<Typography>{element.title}</Typography>
            />
            <FiberManualRecordRoundedIcon sx={element.seen ? styles.icon_seen : styles.icon_unseen}/>
            </ListItem>
            </ListItemButton>
            <ListItemText
                  primary={<Typography>{element.title}</Typography>
            />
            <FiberManualRecordRoundedIcon sx={element.seen ? styles.icon_seen : styles.icon_unseen}/>

          ))}
        </StyledPopperDiv>
      </PopperUnstyled>
    </Box>
  );
};

Answer 1

I'm not sure where 'List' is coming from but if it would be defined in the component, you need to link it to the component's state.

const [list, setList] = useState(List);

And when you you want to update it, you do it through setList.

setList((prevState => ({
    ...prevState, 
    Your changes
}))

This also means that inside the JSX, you use list instead of List. 

Answer 2

Modify these three places to make it work:

// Assume you have fetched data from server and sorted

// Ideally, this should be inside of your data fetching function, not in the component
const sortedList = List.sort((a, b) => a.timestamp - b.timestamp); 

// 1.
const [sortedNList, setSortedNList] = useState(sortedList);

// 2.
const onClick = (timestamp) => { // We don't need to take the event as param here, but timestamp instead
  setSortedNList(sortedNList.map((item) => item.timestamp === timestamp ? {...item, seen: !item.seen} : item))
};

// 3.
{sortedNList.map((element) => (
  <ListItemButton 
    id={element.timestamp} 
    onClick={() => onClick(element.timestamp)} // pass in element's timestamp
    sx={{borderRadius: 2}}>
  ...
)}

Resource recommendation: React Beta docs