Question

我有一个头像组件：

const Avatar = (props) => {
let newInput = React.createRef();

const upload = async () => {
    let file = newInput.current.files
    await props.changeFile(file)
    console.log('PROPS:', props.file)
    console.log('FILE:', file)
}

return (
    <div className={mod.Avatar}>
        <form method="post" action="" encType="multipart/data">
            <label id={mod.l} htmlFor={mod.ava}><img src={ava} alt=''/></label>
            <input ref={newInput} type="file" id={mod.ava} name="ava" accept='image/*' onChange={upload} files={props.file}/><br />
        </form>
    </div>
)

Reducer的功能：

  case CHANGE_FILE:{
        console.log('ACTION.FILE', action.file)
        let newFile = action.file
        console.log('NEW STATE', {...state, file: newFile})
        return  {...state, file: newFile}
    }

这适用于文本，但是当我使用文件输入时，它不是更新道具。

我记录了它，可以看到我将新文件发送到了状态，但是道具仍然为空。我的控制台日志

ACTION.FILE FileList {0: File, length: 1}l
NEW.FILE FileList {0: File, length: 1}
NEW STATE {posts: Array(4), textAreaValue: "aa", file: FileList}
PROPS: 
FILE: FileList {0: File, length: 1}

派遣行动后我的道具没有更新，但状态已更新

0 个答案: