如何使反应输入显示状态值？

Question

我的 React 组件中有 title 和 message 变量作为本地状态。这个想法是，当组件挂载时，这两个变量要么使用来自 Redux 的 currentPost 对象的各自值进行初始化，要么使用空字符串进行初始化。

const MyComponent = ({ currentPost }) => {
    const [title, setTitle] = React.useState(currentPost.title ? currentPost.title : '');
    const [message, setMessage] = React.useState(currentPost.message ? currentPost.message : '');

    <form>
    <div className="form-group">
         <input
             value={title}
             onChange={evt => setTitle(evt.target.value)}
         />                   
    </div>

    <div className="form-group">
         <input
             value={title}
             onChange={evt => setTitle(evt.target.value)}
         />                   
    </div>
    </form>


    const mapStateToProps = state => ({ currentPost: state.posts.currentPost });
};

上面的代码实际上是一个模式，只要我点击给定帖子的编辑图标就会打开。同时，Redux 状态下为空的 currentPost 对象被选中的帖子填充。然后在上面的 modal 组件中，我从 Redux 状态获取 currentPost。

问题是这两个变量总是得到一个空字符串，即使currentPost 填充了我需要的所有数据。如何使输入字段根据 currentPost 状态显示正确的数据？

Answer 1

你的逻辑是对的，没有错。请注意，只有在组件第一次渲染时才会定义 useState。你的 redux 状态可能只有在组件已经挂载后才会更新。

在定义状态之前检查console.log 的快速方法。

const MyComponent = ({ currentPost }) => {

    // This will probably show "undefined" in the first log
    console.log('current Post', currentPost);

    const [title, setTitle] = React.useState(currentPost.title ? currentPost.title : '');
    const [message, setMessage] = React.useState(currentPost.message ? currentPost.message : '');

    <form>
    <div className="form-group">
         <input
             value={title}
             onChange={evt => setTitle(evt.target.value)}
         />                   
    </div>

    <div className="form-group">
         <input
             value={title}
             onChange={evt => setTitle(evt.target.value)}
         />                   
    </div>
    </form>


    const mapStateToProps = state => ({ currentPost: state.posts.currentPost });
};

有两种方法。您可以直接在输入中使用 redux 状态，onChange 将调用一个方法来更新相同的状态

或

使用useEffect 在 currentPost 更改后更新本地状态。

useEffect(() => {
    setTitle(currentPost.title);
    setMessage(currentPost.message);
}, [currentPost]);

Answer 2

试试这个：

const [title, setTitle] = React.useState(
    currentPost.title && currentPost.title.length ? currentPost.title : ""
  );
  const [message, setMessage] = React.useState(
    currentPost.message && currentPost.message.length ? currentPost.message : ""
  );

currentPost.title 条件检查 title 中是否有值或者它是未定义的，如果你传递一个空字符串，那么这样的条件将返回 true，以便不仅检查值的存在，而且同样对于其中是否存在某些值，您还可以检查长度属性，对于字符串，这应该可以工作。

您可以在此处查看代码：

https://codesandbox.io/s/input-components-o02qg

更新： 看看这个例子，我在 redux 和 TS 上制作了新的 SandBox，

https://codesandbox.io/s/serverless-silence-f19lp?file=/src/MyComponent.tsx

附：只是我不明白为什么要在组件中创建内部状态，如果这些组件的状态存储在 Redux 存储中。

附言请显示更多代码以了解更多信息