如何添加react（JS）中的地图返回的图像

Question

我正在构建一个聊天框，在卡上，我有一个我用messagelist用usestate：

​但是它没有显示图像（我正在更改“ Messagelist” func）：

函数convboard（{name}）{

const [initMessageList, setMessageList] = useState([])

const messageList = initMessageList.map((now, key) => {
    if (now.Image) {
        return <img src={preview} />
    }
    return <Message text={now.text} key={key} />
});

let newText = useRef(null);

const addMessage = () => {
    if (newText.current.value != "") {
        setMessageList([...initMessageList, {
            text: newText.current.value,
            key: initMessageList.length
        }])
        newText.current.value = ""
    }
}

const onKeyFunc = function onKeyEnter(e) {
    if (e.key === "Enter" && newText.current.value != "") {
        { addMessage() };
    }
}

const [image, setImage] = useState();
const [preview, setPreview] = useState();

const pressRef = useRef();

useEffect(() => {
    if (image) {
        const reader = new FileReader()
        reader.onloadend = () => {
            setPreview(reader.result)
        };
        reader.readAsDataURL(image)
        setMessageList([...initMessageList, {
            text: preview,
            key: initMessageList.length
        }])
    } else {
        setPreview(null)
    }
}, [image]);

return (
    <Tab.Pane eventKey={name}>
        <Card className='card'>
            <extraWarper className="extra">
                {messageList}
            </extraWarper>
        </Card>
        <InputGroup>
            <FormControl className='inputLine' ref={newText}
                placeholder="your text" onKeyPress={onKeyFunc}
            />
            <Button variant="outline-secondary">record</Button>
            <DropdownButton title="upload" variant="outline-secondary">
                <button onClick={(event) =>
                    pressRef.current.click()
                }>
                    Send image
                </button>
                <input ref={pressRef} id="filePicker" style={{ display: "none" }} type={"file"}
                    onChange={(event) => {
                        const file = event.target.files[0]
                        if (file) {
                            setImage(file)
                        } else {
                            setImage(null)
                        }
                    }
                    } />
            </DropdownButton>
            <Button variant="outline-secondary" onClick={addMessage}>send</Button>
        </InputGroup>

    </Tab.Pane>
);

导出默认的探报板 }

现在，该网站看起来像这样：

但是，当我尝试添加图像空白时。 有什么想法吗？ （对不起，这一团糟，谢谢！）

Answer 1

此代码中没有now.image。

    if (now.Image) {
        return <img src={preview} />
    }
    return <Message text={now.text} key={key} />
});

可能有now.text，代表now.image and preview在代码中，

因为您将其设置在代码的这一部分中

 setMessageList([...initMessageList, {
            text: preview,
            key: initMessageList.length
        }])