Question


const shoopingList = [{name:'some thing', id:1},{name:'some string', id:4}]

const CurrentLists = ({ shoppingList }) => {
    const arr = [...shoppingList]
    arr.map((item, index) => {
        item.isChecked = false
    })
    const [checkedItems, setCheckeditems] = useState(arr)
    const handleOnChange = (e) => {
        const index = e.target.name
        const val = e.target.checked
        checkedItems[index].isChecked = e.target.checked
        setCheckeditems([...checkedItems])
    }
    return (
        <div>
            {checkedItems.map((item, index) => {
                console.log('item check', item.isChecked)
                return (
                    <CheckBox
                        key={index}
                        name={index}
                        checked={item.isChecked}
                        text={item.name}
                        onChange={handleOnChange}
                    />
                )
            })}
        </div>
    )
}

const CheckBox = ({ checked, onChange, text, className = '', name }) => {
    let css = classnames({
        activebox: checked,
    })
    return (
        <div className={'CheckBoxComponent ' + className}>
            <div className={'checkbox ' + css}>
                <input
                    name={name}
                    type="checkbox"
                    onChange={onChange}
                />
                {checked && <i className="far fa-check signcheck" />}
            </div>
            <label>{text}</label>
        </div>
    )
}

我有一些复选框。当我单击复选框时，我的组件不会重新渲染。怎么了我可能使用的钩子setState错误。

Answer 1

在每次重新渲染时，您基本上是将isChecked属性设置为false。尝试像这样更新组件：

const CurrentLists = ({ shoppingList }) => {
  const [checkedItems, setCheckeditems] = useState(shoppingList)

  const handleOnChange = useCallback(
    (e) => {
      const index = e.target.name
      let items = [...checkedItems];
      items[index].isChecked = e.target.checked;
      setCheckeditems(items);
    }, [checkedItems]
  );
  return (
      <div>
          {checkedItems.map((item, index) => {
              console.log('item check', item.isChecked)
              return (
                  <CheckBox
                      key={index}
                      name={index}
                      checked={item.isChecked}
                      text={item.name}
                      onChange={handleOnChange}
                  />
              )
          })}
      </div>
  )
}

您可能还会注意到useCallback的使用。这样可以确保您的回调被记住，并且不会在每次重新渲染-more about it上创建。

Answer 2

在handleOnChange中，您正在直接改变状态，并且因为状态引用未更改，所以React不会重新渲染。要解决此问题，请将行setCheckeditems(checkedItems)更改为setCheckeditems([...checkedItems])。

也在渲染中渲染shoppingList，但是需要渲染的是checkedItems

反应钩子如何处理多个复选框

2 个答案: