React JS状态更改未启动重新渲染答案

【问题标题】：React JS state change not initiating re-renderReact JS状态更改未启动重新渲染
【发布时间】：2021-12-14 13:39:07
【问题描述】：

我正在尝试在我的 React JS 应用程序中设置兴趣和时事通讯订阅表格。但是当我更新状态 onClick 时，状态状态不会改变。如果我双击它，状态会更新，这不是理想的行为。我知道反应调度状态，这就是我使用函数方法来更新状态的原因。

状态定义：

const [newsLetterOptions, setNewsLetterOptions] = useState([]);
  const [interestOptions, setInterestOptions] = useState([]);
  const [customerInterests, setCustomerInterests] = useState([]);
  const [customerNewsletters, setCustomerNewsletters] = useState([]);

  useEffect(async () => {
    const response = await getNewslettersAndInterests();
    setNewsLetterOptions(response.view_data.newsletters);
    setInterestOptions(response.view_data.interests);
    setCustomerInterests(response.view_data.customer_intersets);
    setCustomerNewsletters(response.view_data.customer_newsletters);
  }, []);

事件处理程序：

  const onChangeNewsletterHandler = (event) => {
    event.preventDefault();

    const id = +event.target.id;

    if (customerNewsletters.includes(id)) {
      console.log("exists");
      setCustomerNewsletters(prev => {
        return prev.filter(item => item !== id);
      });
    } else {
      setCustomerNewsletters(prev => {
        return [...prev, id];
      });
    }

  };

{newsLetterOptions.map((option) => {
                      return (
                        <Form.Check
                          key={option.id}
                          type="checkbox"
                          label={option.title}
                          name={option.code}
                          id={option.id}
                          checked={customerNewsletters?.includes(option.id)}
                          onChange={onChangeNewsletterHandler}
                        />
                      );
                    })}

【问题讨论】：

哪个状态没有正确更新？
能否请您登录 newsLetterOptions 并查看 option.id 是数字还是字符串？
我正在更改 customerNewsletter 但它不会触发重新渲染
检查 if 和 else 子句是否有效。其次，您不能以这种方式在 useEffect 中使用异步
当您说您正在更改时事通讯选项时，您指的是什么代码？因为在您的 onChangeNewsletterHandler 中，您正在更改 customerNewsletters

标签： reactjs react-hooks mern

【解决方案1】：

我犯了一个错误。 event.preventDefault(); 阻止了要检查的复选框的默认行为。

【讨论】：