Question

反应选择始终重新渲染，即使更改其他状态也是如此。

...
  const [expense_currency, setExpenseCurrency] = React.useState(expense_claim.expense_currency);
  const [remarks, setRemarks] = React.useState(expense_claim.remarks);
  ...
  ...
  return (
     ...
        <div className="form-group row p-0 col-sm-12 col-md-6">
           <label className="text-nowrap col-form-label col-sm-4">Currency</label>
           <div className="col-sm-8 p-0" title={expense_currency}>
              <Select
                  className="select2"
                  placeholder="Select Currency"
                  isDisabled={false}
                  isClearable={true}
                  value={expense_currency}
                  options={select_currency}
                  onChange={selected => { setExpenseCurrency(selected.value) }}
              />
           </div>
        </div>
        <div className="form-group row p-0 col-sm-12 col-md-6">
           <label className="text-nowrap col-form-label col-sm-4">
              Remarks
           </label>
           <div className="col-sm-8 p-0">
              <textarea
                 className="form-control"
                 required={true}
                 disabled={false}
                 name="remarks"
                 placeholder=""
                 defaultValue={remarks}
                 onChange={e => setRemarks(e.target.value)}
              ></textarea>
          </div>
      </div>
  )

我的Chrome反应探查器中的

SS

我尝试用react-select v2.0.0到v.2.4.4都具有相同的结果。我可以知道在更新我的备注字段时如何使其不重新呈现吗？

Answer 1

这取决于Select使用的是PureComponent还是memo（）或类似的东西。但是，如果它是道具，那么由于您正在为每个渲染器的onChange创建回调，因此每次传入的道具都会中断检查。

要使用一致的回调引用，请使用useCallback：

const onSelectChange = useCallback(selected => setExpenseCurrency(selected.value), [setExpenseCurrency]);

并将其传递：

onChange={onSelectChange}

如果select_currency是非基元，例如您还需要确保数组或对象也是一致的引用。您没有发布，因此无法建议。

即使选择了其他状态，React Select Always也会重新渲染

1 个答案: