React Hooks setState的意外结果

Question

I am getting some unexpected results. Looking at that

import React from 'react';
import PropTypes from 'prop-types';

const propTypes = {
  fooList: PropTypes.array
};

const defaultProps = {
    fooList: [
        { active: false }, 
        { active: false }
    ];
};

const FooBar = ({
  fooList
}) => {
  const [state, setState] = React.useState(fooList);
  const onClick = (entry, index) => {
    entry.active = !entry.active;
    state[index] = entry;
    console.log('#1', state) // <- That loggs the new State properly!
    setState(state);
  }
  console.log('#2', state) // <- That does not log at after clicking on the text, only after the initial render
  return state.map((entry, index) => {
    return <p
      onClick={() => onClick(entry, index)}
      key={index}>
      {`Entry is: ${entry.active ? 'active' : 'not active'}`}
    </p>
  })
}

FooBar.defaultProps = defaultProps;
FooBar.propTypes = propTypes;
export default FooBar;

I expect on every click the text in the <p /> Tag to change from Entry is: not active to Entry is: active .

Now, I am not sure if I can simply alter the state like this

state[index] = entry;

Using a class extending React.Component , this wouldn't work. But maybe with React Hooks? And then, I am not sure if I can use hooks in a map() .

Answer 1

When you use state[index] = entry; , you are mutating the state but the state reference does not change, and so React will not be able to tell if the state changed, and will not re-render.

You can copy the state before mutating it:

  const onClick = (entry, index) => {
    entry.active = !entry.active;
    const newState = [...state];
    newState[index] = entry;
    console.log(newState) // <- That loggs the new State properly!
    setState(newState);
  }

Answer 2

I would also consider maybe changing up your design a little https://stackblitz.com/edit/react-6enuud

rather than handling each individual click out side, if it is just for display purposes, then it can be easier to encapsulate in a new component:

const FooBarDisplay = (entry) => {
  const [active, setActive] = useState(entry.active);
  const onClick = () => {
    setActive(!active);
  }
  return (<p onClick={() => onClick()}>
    {`Entry is: ${active ? 'active' : 'not active'}`}
  </p>
  )
}

Here you can make handling state easier, and avoid mutating arrays.

Simpler parent:

const FooBar = ({
  fooList = [
    { active: false },
    { active: false }
  ]
}) => fooList.map((entry, i) => <FooBarDisplay key={i} entry={entry} />);

I've just moved default props to actual default argument values.