React - Mui - 自动完成 - 要求输入密钥

Question

console: Warning: Encountered two children with the same key

how can i add keys?

i tried

 <Stack spacing={2} sx={{ width: 300 }}>
        <Autocomplete
          id="free-solo-demo"
          freeSolo
          options={cityObj.map((option) => option.name)}
          renderInput={(params) => (
            <TextField
              {...params}
              error={weatherData?.error ? true : false}
              fullWidth
              label="name your city here..."
              value={search}
              onChange={(e) => {
                setSearch(e.target.value);
              }}
              ref={inputField}
              onKeyDown={(e) => e.key === "Enter" && handleSubmit(e)}
            />
          )}
        />
      </Stack>

Answer 1

Autocomplete automatically maps your options and put the option value as key for each option. So evidently you have some duplicate name values in in your cityObj array.
I don't know if there is a way to change the keys in order to suppress the warning, but even if there is, I recommend to not fiddling with it and fixing the problem in a correct manner by removing the duplicate value from your options array . Because why would we have two or more identical options in a autocomplete anyway?