使用 JSON 有效负载数据将数据显示到下拉列表中答案

【问题标题】：Display data into dropdown using JSON payload data使用 JSON 有效负载数据将数据显示到下拉列表中
【发布时间】：2021-11-15 13:01:50
【问题描述】：

我从服务器返回了这个 JSON：

[
   {
      "symbol":"one option"
   },
   {
      "symbol":"second option"
   }
   .......
]

获取数据的服务：

        useEffect(() => {
                const requestOptions = {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    credentials: 'include',
                };
        
                fetch('/data', requestOptions)
                    .then((response) => {
                        if (response.status !== 200) {
                            throw new Error(response.status);
                        } else {
                            return response.json();
                        }
                    })
                    .then(
                        (futurePairs) => {
                            console.log(futurePairs)
                            props.onSetAvailableFuturesPairs(futurePairs);
                        },
                        (error) => {
                            console.log(error);
                        }
                    );
            }, []);

......

onSetAvailableFuturesPairs: addAvailableFuturesPair,

......

        export const ADD_AVAILABLE_FUTURES_PAIR = 'availableFuturesPairs:addAvailableFuturesPairs';
        
        export function addAvailableFuturesPair(newPair) {
            return {
                type: ADD_AVAILABLE_FUTURES_PAIR,
                payload: {
                    newPair: newPair
                }
            }
        }

......

availableFuturesPairs: [],

......

显示数据：

                        <Select
                            onChange={event => changeSelectedFuturesPair(event.target.value)}
                            value={props.selectedFuturesPair}>
                            {props.availableFuturesPairs.map((option) => (
                                <option key={option.symbol} value={option.symbol}>{option.symbol}</option>
                            ))}
                        </Select>

但我得到错误：

`Warning: Each child in a list should have a unique "key" prop.`

你知道我该如何解决这个问题吗？

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

尝试用索引传入key prop

{props.availableFuturesPairs.map((option) => (
                                <option key={option.symbol} value={option.symbol}>{option.symbol}</option>
                            ))}

更新：

{props.availableFuturesPairs.map((option, index) => (
                                <option 
key={index} 
value={option.symbol}
>{option.symbol}</option>
                            ))}

【讨论】：

现在我得到input 上的Warning: value` 属性不应该为空。考虑使用空字符串来清除组件或undefined 用于不受控制的组件。`
@user1285928 试试 option.symbol || "" 并在选择标签 props.selectedFuturesPair || ""

【解决方案2】：

您可以提供索引作为箭头函数的第二个参数

props.availableFuturesPairs.map((option,index) => (
                                <option key={index} value={option.symbol}>{option.symbol}</option>
                            ))

或者安装uuidv4

并将其用作

props.availableFuturesPairs.map((option) => (
                                <option key={uuidv4()} value={option.symbol}>{option.symbol}</option>
                            ))

【讨论】：

每次组件的键更改时，React 都会创建一个新的组件实例而不是更新当前的实例，因此为了性能起见，使用 uuidv4() 至少可以说是次优的。参考：reactjs.org/blog/2018/06/07/…
现在我得到input 上的Warning: value` 属性不应该为空。考虑使用空字符串来清除组件或undefined 用于不受控制的组件。`