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

Question

我在一个组件上使用 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("");

问题是，我将它正确地保存到商店中，但是在我保存它之后，它应该 return 到表单页面并显示我选择的颜色，就像我正在做的一样在带有 return 的 getSuggestionValue 函数上，但文本未显示，我也没有收到任何错误，并且我打印的控制台日志如下：

value BLACK
selection BLACK

Answer 1

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

挂钩：

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>;
  };

和getSuggestionValue:

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

onSave:

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


};

我就是这样解决的，希望对你有帮助！

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

Rendering and showing selections with autosuggest

autosuggest

reactjs

redux

react-redux