React：将名称-值对呈现为 React.FC

Question

我有一个简单的名称-值对定义为接口NameValuePair。

interface NameValuePair {
    [key: number]: string; 
}

使用此接口，React.useEffect 正在初始化状态值，例如

const NameValuePairFC = () => {
    const [nameValuePairs, setNameValuePairs] = React.useState<NameValuePair>();
     
     React.useEffect(() => {        
         const tempNameValueMap: NameValuePair = {};
         tempNameValueMap[0] = "Zero";
         tempNameValueMap[1] = "One";
         tempNameValueMap[2] = "Two";
         setNameValuePairs(tempNameValueMap);
     }, [nameValuePairs]);
 
     return (
       <div className="content">
       Rendering name value pairs
           {          
               Object.keys(nameValuePairs).map((key) => {
                   const nv = nameValuePairs[key];       
                   console.log("name: " + key + "; value: " + nv[key]);
       
                   <div key={key}>
                       Key: {key} and value: {nv[key]}
                   </div>;
               })
           };   
       </div>
     );
};

我看到控制台没有打印任何内容，也没有渲染任何片段。 我期望打印定义的 3 个名称值对 0: Zero, 1: One, 2: Two 并且不确定我做错了什么。 请告诉我。我已经把它放在我正在尝试做的codepen 中。

Answer 1

首先，nameValuePairs 始终是默认值。 useEffect 未执行，因此状态未更新。尝试使用一个小的依赖数组。

此外，您不会从 map 函数返回任何内容。添加return 语句。所以你的代码不会呈现这些对。

您的代码应如下所示：

interface NameValuePair {
    [key: number]: string;
}

const NameValuePairFC = () => {
    const [nameValuePairs, setNameValuePairs] = React.useState<NameValuePair>();

    React.useEffect(() => {
        const tempNameValueMap: NameValuePair = {};
        tempNameValueMap[0] = "Zero";
        tempNameValueMap[1] = "One";
        tempNameValueMap[2] = "Two";
        setNameValuePairs(tempNameValueMap);
    }, []); // empty dependency array added, `useEffect` executed once, on first render

    return (
        <div className="content">
            Rendering name value pairs
            {nameValuePairs &&
                Object.keys(nameValuePairs).map((value, index, array) => {
                    console.log(
                        "NameValuePairFC name: " + index + "; value: " + nameValuePairs[index]
                    );
                    return (<div key={index}> // return statement added
                        Key: {index} and value: {nameValuePairs[index]}
                    </div>)
                })}
            ;
        </div>
    );
};

ReactDOM.render(<NameValuePairFC />, document.getElementById('root'));