问题:使用自动建议渲染和显示选择

我在一个组件上使用 react-autosuggest,它获取选项列表,呈现建议,然后当用户单击一个时将其保存到商店。当我想打印所选值时遇到问题

然后是功能:

保存时:

      const onSave = () => {
    props.saveCarColor(value);
    console.log("value", value);
    getSuggestionValue(value);
    if (!props.carColor) {
      return toastError("Error");
    }
    props.history.push(getRoute(""));
  };

渲染建议:

const renderSuggestion = (item) => {
    return <span>{item.Value}</span>;
  };

获得建议:

    const getSuggestionValue = (selection) => {
    console.log("selection", selection);
return selection.Value;
  };

输入道具:

    const inputProps = {
    value,
    onChange: (event, { newValue }) => setValue(newValue),
  };

我声明了这个钩子来更新值:

  const [value, setValue] = useState("");

问题是,我将它正确保存到商店中,但是在我保存后 onSave,它应该返回表单页面并向我显示选择的颜色,就像我在 getSuggestionValue 函数上所做的返回一样,但是文本没有显示,我也没有收到任何错误,我的控制台日志打印了这个:

value BLACK
selection BLACK

解答

最后我最终使用另一个钩子来保存选定的颜色,所以现在我有了这个:

钩子:

const [value, setValue] = useState("");
  const [selected, setSelected] = useState(null);

输入道具:

const inputProps = {
    placeholder: "Ej: BLUE",
    value,
    onChange: (event, { newValue }) => setValue(newValue),
  };

渲染建议:

const renderSuggestion = (item) => {
    return <span>{item.Value}</span>;
  };

并获取建议值:

const getSuggestionValue = (selection) => {
    setSelected(selection.Value);
    return selection.Value;
  };

保存:

const onSave = () => {
if (!selected) {
  return toastError("");
}
props.saveCarColor(selected);


};

我就是这样解决的,希望对你有帮助!