下拉列表中的setValue不更新​​文本元素中的值变量。

Question

我有一个下拉列表和setValue，可以选择下拉列表的价值。我也有一个文本元素，只要更改下拉列表，就应该显示该值，但是当我更改下拉列表时，它不会更新文本而保持空白？这是我正在使用 https://www.npmjs.com/ppackage /React-Native-Native-element-Dropdown

const App = () => {
  const [products, setProducts] = useState<ProductType[] | []>([]);
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(' ');
  const [isFocus, setIsFocus] = useState(false);

 
  const getProducts = async () => {
    try {
      const response = await axios.get('http://192.168.1.32:3000/api/products');
      setProducts(response.data);
    } catch (error) {
      // handle error
      alert('no');
    }
  };

  React.useEffect(() => {
    getProducts();
  }, []);


  return (
    <>
      <AppBar
        title="App"
        trailing={props => (
          <Button
            variant="text"
            title="ADD"
            compact
            //onPress={getProducts}
            style={{marginEnd: 4}}
            {...props}
          />
        )}
      />

      <Dropdown
        style={[styles.dropdown, isFocus && {borderColor: 'blue'}]}
        data={products}
        search
        maxHeight={300}
        labelField="product"
        valueField="aisle"
        placeholder={!isFocus ? 'Select item' : '...'}
        searchPlaceholder="Search..."
        value={value}
        onFocus={() => setIsFocus(true)}
        onBlur={() => setIsFocus(false)}
        onChange={item => {
          setValue(item.value);
          setIsFocus(false);
        }}
      />
      <TextInput label="quantity" variant="standard" />
      <Text>value: {value}</Text>
    </>
  );
};
export default App;

const styles = StyleSheet.create({
  dropdown: {
    height: 50,
    borderColor: 'gray',
    borderWidth: 0.5,
    borderRadius: 8,
    paddingHorizontal: 8,
  },
  row: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
});

Answer 1

我认为onChange函数正在触发，并且值setValue正在接收是问题，而不是下拉级 component。

我已经重新创建了您的代码（为简单起见，删除了Appbar），并用 this代码工作：

const App = () => {
  const [products, setProducts] = useState([]);
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(' ');
  const [isFocus, setIsFocus] = useState(false);

 
  const getProducts = async () => {
    try {
      const response = await axios.get('https://dummyjson.com/products');
      setProducts(response.data.products);
    } catch (error) {
      // handle error
      alert('Oh no','...');
    }
  };

  React.useEffect(() => {
    getProducts();
  }, []);


  return (
    <>
      <Dropdown
        style={[styles.dropdown, isFocus && {borderColor: 'blue'}]}
        data={products}
        search
        maxHeight={300}
        labelField="title"
        valueField="title"
        placeholder={!isFocus ? 'Select item' : '...'}
        searchPlaceholder="Search..."
        value={value}
        onFocus={() => setIsFocus(true)}
        onBlur={() => setIsFocus(false)}
        onChange={item => {
          setValue(item.title);
          setIsFocus(false);
        }}
      />
      <TextInput label="quantity" variant="standard" />
      <Text>value: {value}</Text>
    </>
  );
};
export default App;

我看到aisle是您给予valuefield的值。您的意思是做setValue（item.aisle）而不是setValue（item.value）？

如果item.Value是您想要的，则验证它不是一个空字符串。将其记录在您的onChange函数中。